CSS Gridレイアウト入門：グリッドの結合と列番号・行番号の概念

以下はGridレイアウトで画面全体をレイアウトした例です。
ブログによくあるレイアウトですが、Gridレイアウトでは列と行が要のため赤線を入れています。

HTML

<div class="grid">
  <header>ヘッダー</header>
  <main>メイン</main>
  <navi>ナビゲーション</navi>
  <div class="ad">広告</div>
  <div class="side">サイド</div>
  <footer>フッター</footer>
</div>

以上のように、大枠でGrid指定した単純なHTMLです。

大枠へのGrid指定

大枠の .grid 対して以下のようにGridを指定しています。

.grid {
  display: grid;
  grid-template-columns: 150px auto 150px;
  grid-template-rows: 50px 100px auto 50px;
  grid-gap: 5px;
  ...
}

grid-template-columnsで横3列、grid-template-rowsで縦4行のグリッドを指定しています。

Gridレイアウトでは赤線部分の列番号と、行番号の概念があります。

上記サンプル画面の黒い枠線の箇所にあたり、上記サンプルでは左から1〜4の列番号、上から1〜5の行番号があります。この列番号、行番号はセルの配置・結合で利用します。

グリッドの配置

ヘッダーは以下のように指定しています。

header {
  grid-column: 1/4;
  grid-row: 1/2;
  background: #fc9;
}

こちらでは grid-row と grid-column で、 セルを配置する列番号・行番号 を指定しています。

grid-column: 1/4; で1列目から4列目を占め、 grid-row: 1/2; で1行目から2行目までを占めるセルを定義しています。

このプロパティは必須ではなく、記述しなければセル結合なしで相対的な順番で配置されます。
この2つのプロパティを操作することで、セルの表示順も自由に操作できます。

main {
  grid-column: 2/3;
  grid-row: 2/4;
  background: #eee;
}
navi {
  grid-column: 1/2;
  grid-row: 2/4;
  background: #f90;
}

HTML的には main の方が先にありますが、 grid-column で navi を1列目に配置し、 main を2列目に配置しているため、 navi が main の左側に配置されています。

まとめ

親要素では以下2点でGridレイアウトを定義できます。

• grid-template-columns
• grid-template-rows

子要素（セル）では以下2点でGrid内の配置・結合ができます。

• grid-column
• grid-rows

あとは列番号・行番号に慣れれば自由自在にレイアウトできます。