CSSグリッドの列（Grid Columns）とは？基本の使い方を解説

CSSグリッドの「列（Grid Columns）」とは？

CSS Grid Layoutにおいて、グリッドコンテナ内に引かれる縦方向の区切り線を「グリッド列（Grid Columns）」と呼びます。下の図のように、コンテナの中でアイテムを整列させるための縦線が、まさにこの列に該当します。

グリッドレイアウトは、縦の「列」と横の「行（Rows）」が組み合わさることで、マス目状の構造を形成します。列と行が交差する部分が「セル」であり、Webページ上の各要素は、このセル、あるいは複数のセルにまたがる領域へと配置されていきます。

列の本数と幅の定義方法

列の数やそれぞれの幅は、grid-template-columnsプロパティを使って指定します。

.container {
  display: grid;
  grid-template-columns: auto auto auto;
}

上記の例では3つの列が定義され、各列の幅は中身のコンテンツに応じて自動的に調整されます。幅の指定には px や % のほか、余白を均等に分配できる便利な fr 単位も利用できます。

アイテムを列に沿って配置する

個々のグリッドアイテムの配置位置は、grid-column-start と grid-column-end、あるいはその省略形である grid-column プロパティで制御できます。

.item {
  grid-column: 1 / 3; /* 1本目の線から3本目の線までをまたいで配置 */
}

このように列の概念を理解すると、複雑なレスポンシブレイアウトでも、意図した通りの柔軟なデザインが実現しやすくなります。