flexboxの次のcssレイアウト、CSS Grid Layout。

flexboxの次のcssレイアウト、CSS Grid Layout。

flexboxを使うともうfloatを使えなくなってきます。
そんな中、CSS Grid Layoutという言葉をよく聞くようになってきました。
もうjs並みにcssも目まぐるしいですね。
最新のchromeとfirefoxに実装されたことでバーっと広まったのかもしれません。(2017年3月現在)
http://caniuse.com/#feat=css-grid
モダンブラウザじゃなくても、ポリフィルを噛ませれば例によって大体大丈夫なようです。
レガシー案件に首を突っ込んでflexboxさえ使えなかったストレスを
ここへぶつけたいと思います。
カモン。ニューワールド。

★html

★css

1frは、1fraction(1フラクション)と読みます。
display: grid;が指定された要素に対して有効な単位で、要素内の可用領域を表します。割り当てられた領域いっぱいいっぱいという感じです。
demo

で、grid layoutするコンテンツの外枠を作ります。
この中に内包されたものがgrid layoutされます。

grid-template-columnsプロパティは、横軸に何カラムに分割するかを指定します。
この場合は、3カラムなので

1fr 1fr 1fr

となります。4カラムにする場合は

1fr 1fr 1fr 1fr

です。
grid-template-rowsプロパティは、各グリッドの縦幅を指定します。
2列にしたい場合は、grid-template-columnsプロパティと同様に項目を増やし、

50vh 50vh

という記載になります。
demo

任意にグリッドを指定したい場合

grid lineという概念があり、そのgrid lineを指定することによって
任意に指定が可能です。

★css

grid-column-startで開始グリッド線、grid-column-endで終了グリッド線を指定します。
各grid itemには、grid-row(縦位置のグリッド線指定)も必要なので忘れずに。
なお、
grid-column: 3/4;
のように、省略して書くことも可能です。
demo

htmlをいじらずに、cssだけで簡単に位置替えが可能。便利!

grid layoutとflexboxの使い分けについて

似たような感じなので、じゃあどっちが良いの??
となってしまいますが、これもケースバイケースのようです。

ページ構成のように縦横両方を細かく指定したい場合はgrid layout
ナビゲーションメニューのように横一直線に並べたい場合はflex box

という考え方の方がいて、それでいいかなぁと思いました。

grid layoutについて、ゲーム感覚で学べるサイトがあります。
人参を栽培。
ピースフルですなぁ。
興味がある方はぜひ。
★GRID GARDEN

Back to Top