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で間隔を設定します。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
16 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
グリッドアイテムの配置（span）
grid-columnやgrid-rowで、アイテムを複数セルにまたがって配置できます。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
6 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
repeat()とauto-fit/auto-fill
repeat()関数とminmax()を使うと、レスポンシブなグリッドが簡単に作れます。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
10 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
自由に試してみよう
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
7 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。