CSSのグリッドレイアウト【現役エンジニアが解説】

今回は、CSSのグリッドレイアウトについて、HTMLとCSSに分け、簡単に解説していきます。

HTML

ここでは2×2のグリッドレイアウトを想定します。

グリッドレイアウトにはコンテナとアイテムの2つの構成要素がありますが、HTMLではアイテムはコンテナの中に順不同で並べるだけです。

<div id="container">
    <div id="item_A">A</div>
    <div id="item_B">B</div>
    <div id="item_C">C</div>
</div>

上記のコードでは、2×2のグリッドレイアウトを想定して、HTMLでコンテナ1つとアイテム3つを、CSSから操作できるようにそれぞれにidを付けて用意しています。

CSS(ラインの番号で指定)

コンテナでは、displayプロパティの値をgridにし、grid-template-rowsとgrid-templateのプロパティの値で行列のサイズを指定します。

アイテムでは、n×mのグリッドであれば、取る領域をそれぞれn+1とm+1の番号を使って、始点/終点の形式でgrid-rowとgrid-columnプロパティの値で指定します。