【CSS】Gridを使った完全ガイド：基本編

今回は、Webデザインに欠かせない技術の一つであるCSS Gridについてお話しします。
初心者の方でもわかりやすいように、CSS Gridの基本を丁寧に解説していきますので、ぜひ最後まで読んでみてください。

CSS Gridって何？

CSS Gridとは、displayプロパティの一種でウェブページのレイアウトを簡単に作成できるようにするためのCSS機能です。
直線的に1行ずつ並ぶFlexboxと異なり、Gridは行と列を使って多次元に要素を配置できるのが特徴です。

Grid Containerを作る

まずは、Grid Containerを作りましょう。
タテ２列ヨコ2行で作ってみます。HTMLとCSSはこちら。

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px; /* グリッドアイテムの間隔 */
}

.item {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

これで、2列のグリッドレイアウトが作成されます。
各グリッドアイテムには10pxのギャップが設定されています。

See the Pen grid-container-1 by Usagi (@naniwa_usagi) on CodePen.

各プロパティについて解説していきます。

"display: grid"とは？

display: gridを使うと、その要素がGrid Containerになります。
この中に配置された子要素（Grid Item）がグリッドに従って配置されます。

"grid-template-columns"と"grid-template-rows"

grid-template-columnsが縦列の幅を、grid-template-rowsが横行の高さを指定します。

たとえば以下のような設定では、1列目が1fr（フレキシブル単位）、2列目が2frの幅になります。
また、1行目の高さが100px、2行目の高さが200pxになります。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 100px 200px;
  grid-gap: 10px;
}

See the Pen grid-container-1 by Usagi (@naniwa_usagi) on CodePen.

grid-gap

grid-gapプロパティを使うと、グリッドアイテム間のスペースを設定できます。

Grid Itemの配置方法

次に、Grid Itemの配置方法を見ていきましょう。

grid-columnとgrid-row

grid-columnとgrid-rowプロパティを使うと、Grid Itemの配置位置を指定できます。

たとえば以下の設定では、item1クラスが1列目から3列目まで（2列分）、1行目に配置されます。

.item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

See the Pen grid-container-1 by Usagi (@naniwa_usagi) on CodePen.

grid-area

grid-areaプロパティを使うと、要素の配置をまとめて指定できます。
 4つの値が指定されたとき、grid-row-start 、 grid-column-start 、 grid-row-end 、 grid-column-end の順に設定されます。

たとえば以下の設定では、item2クラスが2行目から3行目まで、1列目から3列目まで（2行×2列分）配置されます。

.item2 {
  grid-area: 2 / 1 / 3 / 3;
}

See the Pen grid-container-1 by Usagi (@naniwa_usagi) on CodePen.

自動配置とレスポンシブデザイン

CSS Gridは、自動配置やレスポンシブデザインにも対応しています。

自動配置

要素をGrid Containerに追加すると、自動的に次の空きセルに配置されます。

See the Pen grid-container-1 by Usagi (@naniwa_usagi) on CodePen.

レスポンシブデザイン

メディアクエリを使うと、画面サイズに応じたレイアウトが可能です。

この設定では、画面幅が600px以下の場合は1列のレイアウトになり、601px以上では3列のレイアウトになります。

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 601px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}

See the Pen grid-container-1 by Usagi (@naniwa_usagi) on CodePen.

まとめ

CSS Gridを使えば、複雑なレイアウトも簡単に作成できます。
さまざまなプロパティあって一度に覚えるのは難しいですが、実際に手を動かして試してみるとさらに理解が深まると思います。

次回は応用編で、もっと高度なテクニックを紹介予定ですのでお楽しみに。