Webページをつくるときに、横に均等3分割のコンテンツをおきたくて100 ÷ 3 = 33.3333333…と電卓で叩いたことのあるヒト。
均等な3分割を描画するには、10の要素（値）が必要なので3で割っても意味がない。
まず左右の余白という値がいる。$1Gが右と左に2つ、｜｜1・2・3｜｜
3つのコンテンツの間には2つ間隔がいる。$1MPが2番目の左右に2つ、 1｜｜2｜｜3
100%ではなく10割で考えると、残っているのは10 – 4 = 6 あまりにわかりやすい3の倍数。
1Gは$Gutter、1MPは$Gap、コンテンツは$Content とした場合
1Gutter / 2Content / 1Gap / 2Content / 1Gap / 2Content / 1Gutter1 + 2 + 1 + 2 … = 10 と数えても 2 + 2 + 2 × 3 = 10 と計算しても良いけど、後者がわかりやすいですね、左右・間・中身は3つ
文脈にそった数式は 2 + 2 + 3n = 10 このときnは2
実際には 2G + 2MP + 3n = 100を成立させたいときに、余白も間隔もゼロでぎっちぎちに均等な3分割をしたいときだけ
0 + 0 + 3n = 100 という理屈で、3n = 100 となり、はじめてn = 33.3333333と電卓を叩いた上で、小数点以下の数値をどこで丸めるか、真ン中の箱だけ34％にあたるピクセル値つけても、人間の目に区別なんかつかんだろうー。33％｜34％｜33％
はい、これで100％成立っ！（みたいなことを大昔やってた気がする）
地獄に落ちるわよ
（Powered by：Netflixオリジナルシリーズ）
いやはや。地獄に沼っていた説明が長引いたけども、どれほど Grid layout が天国に近い島、地上の楽園、至上命題の到達点であるかの話をしたい。
それは、n = 33.333 を計算の得意なコンピュータが勝手に丸めてくれるという話では決してない。
私はよく「Webデザイナーにはどんなヒトが向いているのか」と訊かれて、「相対パスと絶対パスの差がわかるヒトなら誰でも」と応え、おそらく（なんとなく煙に巻いたわね、地獄に堕ちればいい）と思われてきた、かもしれない。が、これ真剣に返事している。
相対値と絶対値の差がわからない人物が、この曖昧模糊としたブラウザとの戦争に加担したら地獄に堕ちまっせ。
というのも一片の真実。
また、技術刷新が目まぐるしいため（勉強についていくのが大変）と離職率が高い職業でもあるらしい。
ただ私からすると、ワールドワイドウェブを支える技術者たちは自分より遥かに遥かに優秀な面々で、いつのまにか問題は一つ、また一つと解消されていき、「果報は寝て待て」を地で行ける、まったく飽きない商いなのである。
言い換えるとー旧態依然ーがまったくない代わりに安穏も安寧もねぇ。で、いいか。
と、まるでスリリングなプロポーズみたいですわね。だが断らない。（逆：岸辺露伴）
罫線の話
罫線というと、コクヨCampusノートのような横罫ノートを思い浮かべるが、国語の授業では縦罫線の右開きノートを使っていた。自由帳のような白紙ノートはスケッチブックでもなんでも画家や天才が使えばえぇ。
けど設計には方眼が要りますやね、をかつて誰だか知らない偉大なるグラフィックデザイナーが実装してみせた。
Table Design
今では地獄の門が開いた瞬間のような語られ口をし、インターネット黎明期の笑い話のような扱いをされるTable Design、Table layout、どっちが正しい呼称やねん、というほどレイアウト設計に特化したこの苦し紛れの手法。金の卵。
大きな画像が重いのならば切ればいい（スライス）、絵の中に文字を置きたいなら部分的に背景画像にすればいい、とんでもない思いつきですよね。
所詮HTMLはドキュメントなんやから、左上から右下の隅を目指して書けばよろし。画像も随所に挿れたら素敵なスクラップブック調になるわいね。とブラウザ側が思っていた時代に、生粋のグラフィックデザイナーが、スクラップをつくるつもりなどない。と縦と横の罫線を描く唯一の手段だったTableタグを駆使して、やっちゃった。
ね。天才は白紙のノートに、凄い絵を描く。
たぶんグラフィックツールに「スライス」なんて概念はなくて、Table Designをソフトウェアが追っかけて機能追加したのではと思う。中国の奇書「西遊記」は2026年現在になってもドラマや映画や漫画の原作、あるいは翻案ものとして大勢の人々を今でも食わせている・・・と時々恐れ入るのだが。
Table Designは、Webで私がはじめて見た妖怪だった。そのあと、横罫ノートはバケモノを出現させるためのツールではない的な騒ぎをW3CがHTML4あたりで起こしたような、あまりにくだらなくて憶えてないような。とにかくHTML5が登場するまでは息苦しくてね。セマンティックWeb、大事ですけども、対：Table Designとして語られるときは、単なる錦の御旗、都合よく持ち出してきやがった・・・と内心つい感じるのは否めなかった。
だってねぇ。わたくし「生粋のグラフィックデザイナーたち」しかWebデザインを出来るヒトがいない時代に、紛れ込んだセマンティック野郎だったわけで。HTMLの書き方は学んでいる、プログラムに毛が生えたものをつくれる、そのニッチな場所から、デザイナーたちが設計思想をもってレイアウトしていくのを見ていた。
そのソースはHTMLとして（どうなんだろう）と感じたとしても、成果物の外観が劣っている、機械としかお話しできない、では仕方ない。
と、自分の昔話はどうでもいいんだけども。Flexbox とやたらと比較される Grid layout、初手から間違っているチュートリアル、沼るなぁと感じてまして。
海外のチュートリアルサイトが、イントロダクションで、Table Design・・・Float・・・Flexbox・・・そして（満を持して）Grid layout と時代の変遷から書き出しているのは、CSS GridはTable Designの子、と正しく認知しているからだと思います。
正当な継承者、ですかね。
先に「至上命題の到達点」と大袈裟な書き出しをした理由はそこで、描画されるものが Flexbox と近しく被って見えたとしても、用途が違う、楽さが違う、本質がぜんぜん違う。
描画が似ているだけなら、FloatとFlexboxに差はないじゃないすか。崩れやすいだ、挙動がどうだ、じゃなく「アイテム」の流し込みですよね、どっちも。中身があってはじめて描画が生じる、空白を設けるには、空のDIVにサイズを持たせる、横に追加するにしろ、縦に積んでいくにしろ、「横罫ノート」をどう使うか、という話。
対してCSS Grid layout は方眼紙、はじめて格子状のレイアウトを与えられたわけで、大事なのはトラック、セル、横何番目・縦何番目という、どちらかといえば表計算（Excel・Numbers）のような概念が先にあった方がいい。
だって、セルを結合できるでしょ？
Excelの表は、空のセルがあったって崩れたりしない。先にトラックリストが用意されているから、設計なしでインプットから作業開始できるわけです。インプットする「もの」中身、式やテキストがExcelの場合の「アイテム」であって、それは「セル」ではないと誰でも知っている、のにCSS Grid の説明で語彙が間違っているものから入ると、ボタンの掛け違いが広がると思います。
まぁボタンなんて掛け違えて（やべぇ）と思ってMDNに行くのが結局イソガバ回れで良いのかも知らんが。
レコードがあって、トラックがあり、トラックリストの中で、orderによってシャッフルもできる。一度きりだけど。（レコードはねぇぞと誰かに突っ込まれたい）
そのトラックリストの設計を先にするのが display: grid; を宣言したあと、方眼マス目の列数・行数を定義する
grid-template-columns:
grid-template-rows:
grid-auto-rows:表計算と似ている、とはいえ
その上、CSS Grid は1つのセルを2つ以上のアイテムが共有することさえできる。
CSSの擬似要素 ::before ::after を使わずに、ずらして重ねる、紙の方眼紙でポンチ絵を描いたように、実際に配置できる。
無双ですのよ。
grid-template-areas:
"A A ."
"A A ."
". B C";.A Classセレクタや .B Classセレクタに grid-area: name; をつける手法
grid-area: A;
grid-area: B;
grid-area: C;
を grid-template-areas:で位置決めするのは直観的だし、空白セルには（ . ）ドット置き、わかりやすい。
一方で、横何番目・縦何番目とセルのアドレスを書かせるような方法もあるのは、何故か。
.ClassName {
grid-column: 1/3;
grid-row: 1/2;
}grid-template-areas:では「ずらした・重ね」が表現できない。
grid-columnでX方向→
grid-rowでY方向↓
z-index: でセルの中で重なったアイテムのどちらを上に描画するか指定する。擬似要素なしで3D表現ができる。
See the Pen Untitled by Sakura.i Studio Mic (@Sakurai-Studio-Mic) on CodePen.
z-index: を指定しない場合、当然後に書かれているものが上（手前）に来る
分数：fractionの話どこいった
根が表計算マニアな悪い癖が出てしまった。お題は、fr という単位の妥当性である。
直訳で分数、AIによると比率、らしい。
CSSグリッドで使える単位「fr」
「ｆｒ」単位とは「fraction(比率)」のことで、親要素から見た子要素の大きさを割合で指定することができます。
「px」で幅を指定してしまうとその幅で固定されてしまうので、画面の幅に合わせて自動で伸縮させるなら「fr」単位を使うと便利です。
便利です、と言われながら
grid-template-columns: 1fr 1fr;みたいなチュートリアル、多いですよね・・・比率と言われれば確かに1：1 アスペクト比の正方形みたいな余計な情報が頭を過ぎるのだけど
横を2分割、をそのまま言葉にしません？
grid-template-columns: 50% 50%;あるいは
grid-template-columns: 50fr 50fr;結果は同じなんだから、設計意図がわかる方が好ましい。
大きさのサイズ単位がpxだろうと、svw、vwといったデバイスを意識したブラウズサイズだろうと、何某かの「100%」に対する比率、割合を（もう電卓叩かなくていいですよ）と
ブラウザというのは絶対値でなく相対値なんでね、と可変式な透明・方眼をようやく与えられたのに
grid-template-columns: 1fr 1fr 1fr;はいはい、3分割ですね・・・の「振り出しに戻る」スゴロク的ガッカリ感。
ホールケーキを3等分するくらい、話わかんないっす、難しいです。
ここは3分割と思ったら
grid-template-columns: 3fr 3fr 3fr;
grid-template-columns: repeat(3, 1fr);犬の電柱マーキングくらい解りやすい。
どっちだっていいけど。3つあると数えるのは億劫なので、3という数字があれば良い。
10進法がメジャーな、10割の世界に生きてて、何割引き！ーのシール見て買い物するじゃないすか。
何割引きのシールを見たときゃ値段の高いものを買った方が得な気がする（相対）
何十円引きのシールは（絶対）
.aspectRatio {
display: grid;
grid-template-columns: repeat(16, 1fr);
grid-template-rows: repeat(9, 1fr);
gap: 2em;
}こういう例がもしあったら、好き。夥しい数のDIVタグを並べ、borderで枠色を出せば、モニターによくある16：9の方眼紙が印刷できる。高さと幅は100shv・100swv
最適なユースケース
Flexbox と Grid layout、で上手に使い分けましょう、
カードのレスポンシブには便利です、ご尤もだけども歴然たる「差」が伝わらない、結局どっちでつくればいいの、と感じたヒトがいたなら、「マンスリータイプのカレンダー」12ヶ月分を、試せばきっとわかる、天国と地獄、山崎努と三船敏郎。
列は月曜から日曜で7列、行は5週分で5行のようだが、年間通すと6行必要な月が絶対に生じるところを、印刷した卓上カレンダーなどは工夫して5行を定型にしている場合が多い。
が。さすがコクヨCampus Diary（monthly）Amazon
はなから6行でつくっておいて、右手側の空きスペースに前後の月をミニサイズで表示。2026年は3・8・11月が6行必要。
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(6, 1fr);はなから6行なら、これ。
最後のセルと、最後から2番目のセルに、「Campus Diary」は先月と翌月を小さく配置。grid-column: -/-;grid-row: -/-; は面倒なので端折ります。が、最後からならマイナスつけて書けば良い
小さく表示なんてことはWebでは不可能なので＜Prev ：Next ＞とかになるんでしょうか。 ＜ ＞ リンクBtnでスライダーにするも良し。
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-auto-rows: 1fr;上が「はなから」明示的に定義しておく、下が「暗黙的」にグリッドトラックが追加作成される書き方、grid-auto-rows:で6行目が登場する月も、高さを揃えようと考慮してるわけですが・・・
いろいろ、いや全部間違ってますねぇ！笑
月・火・水・・・の表題がない。伸び縮みするカレンダーはきっと気持ち悪いので正方形になる固定値をつける、と
.calendar {
display: grid;
grid-template-columns: repeat(7, 5em);
grid-template-rows: 2em repeat(5, 5em);
grid-auto-rows: 5em;
}ベースはこんな感じですかね。
同じことをFlexboxでやりなさいと言われても、ちょっとやり方が思い浮かばない。電卓と人力と根性があれば可能なんだろうけど、そんな暇があったら、（Tableタグ書けよ）と道半ばで思うだろなー。とブロックエディタにある「カレンダー」ブロックをポチッと置いてみると、やはりTableで書かれてました。そらそーか。
動的なフレームワークを使う場合、Tableタグを部分スライスして挿むのは何の苦にもならないはずだが、スマホで見た場合Gridの方が愛らしく描けるかも知れない（という気がしている無責任）