CSS レッスン6
Gridレイアウト
display: gridを使って、2次元のレイアウトを自在にコントロールしよう
CSS Gridの基本
CSS Gridは行と列の2次元レイアウトを作るための仕組みです。Flexboxが1次元（横or縦）なのに対し、Gridは両方向を同時に制御できます：
display: grid- グリッドコンテナを作成grid-template-columns- 列の数とサイズを定義grid-template-rows- 行の数とサイズを定義gap- グリッド間の余白grid-column / grid-row- アイテムの配置範囲を指定fr- 残りスペースの比率を指定する単位
基本のグリッド
grid-template-columnsで列を定義し、gapで間隔を設定します。
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Previewグリッドアイテムの配置（span）
grid-columnやgrid-rowで、アイテムを複数セルにまたがって配置できます。
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Previewrepeat()とauto-fit/auto-fill
repeat()関数とminmax()を使うと、レスポンシブなグリッドが簡単に作れます。
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Preview自由に試してみよう
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Preview