CSS Grid Layoutを使いこなす
2025年08月03日
CSS Grid Layoutは、Flexboxが1次元のレイアウトシステムであるのに対し、2次元(行と列)のレイアウトを扱うための強力なシステムです。
Gridの基本
Gridレイアウトを始めるには、コンテナ要素にdisplay: grid
を設定します。
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 80px 200px;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
この例では、3列のグリッドが作成されます。grid-template-columns
で行のサイズ、grid-template-rows
で列のサイズ、gap
でアイテム間の間隔を指定します。
Gridは複雑なWebページのレイアウトを、より直感的かつ堅牢に構築するための現代的な解決策です。