CSS Grid Layoutで簡単なレイアウトを作る

以前の記事で、グリッドレイアウトの基本的な用語や使い方を紹介しました。

CSS Grid Layout の基本

数々のWebサイトで採用されており、人気の高いデザイン手法であるグリッドレイアウトの基本用語の解説を行っています。

leben.mobi

2018-07-13 21:02

今回は下のようなデザインのレイアウトを作成してみたいと思います。

まずはグリッドコンテナを作ります。

htmlの中身は以下の通りです。親要素にはcontainerというidを設定しています。

その中に配置する各要素を記述しています。

<div id="container">
  
<header>header</header>

  <main>main</main>
  
<nav>nav</nav>

  
<footer>footer</footer>

</div>

次に、CSSで親要素のcontainerにグリッドコンテナを指定していきます。

#container {
  display: grid;
}

◎実行結果

わかりやすく各要素には背景色を設定しています。

今のままではただ要素が積みあがっているだけなので、ここからグリッドコンテナを分割するための指定をしていきます。

グリッドコンテナを縦と横に分割します。

縦方向に分割した各列のサイズはgrid-template-columns、横方向に分割した各行のサイズはgrid-template-columnsで指定します。

今回は、右のnavの幅を150px、headerを60px、footerを80pxと設定します。mainの縦や横は親要素から固定幅を引いた可変幅にします。

#container {
  display: grid;
  /* 追加した分 */
  grid-template-columns: 1fr 150px;
  grid-template-rows: 60px 1fr 80px;
}

◎実行結果

幅は指定できたのですが、アイテム（header、main、nav、footer）をどこに配置するのかを指定していないため、正しくレイアウトされていない状態です。

グリッドアイテムを配置していくときに使用するのがgrid-column(row)-startとgrid-column(row)-endプロパティです。グリッドアイテムが列（行）の何番目から何番目までのグリッドラインまで配置するか指定します。

上の表は今回のレイアウトの列と行のグリッドラインの指定一覧です。

図面上でもいいので一旦書き出しておくと指定するときに間違いが減ると思います。

これを各グリッドアイテムのcssに適用していきます。

header {
  background-color: #247BA0;
  color: #fff;
  /* 列のグリッドラインの指定 */
  grid-column-start: 1;
  grid-column-end: 3;
  /* 行のグリッドラインの指定 */
  grid-row-start: 1;
  grid-row-end: 2;
}

main {
  background-color: #FFFCFF;
  /* 列のグリッドラインの指定 */
  grid-column: 1;
  grid-column: 2;
  /* 行のグリッドラインの指定 */
  grid-row: 2;
  grid-row: 3;
}


nav {
  background-color: #C3B299;
  color: #fff;
  /* 列のグリッドラインの指定 */
  grid-column-start: 2;
  grid-column-end: 3;
  /* 行のグリッドラインの指定 */
  grid-row-start: 2;
  grid-row-end: 3;
}

footer {
  background-color: #50514F;
  color: #fff;
  /* 列のグリッドラインの指定 */
  grid-column-start: 1;
  grid-column-end: 3;
  /* 行のグリッドラインの指定 */
  grid-row-start: 3;
  grid-row-end: 4;
}

◎実行結果（containerの縦幅を550pxに設定しています。）

ざっくりレイアウトの完成です。

ちなみにgrid-column-startプロパティなどの書き方は

header {
  background-color: #247BA0;
  color: #fff;
  /* 列のグリッドラインの指定 */
  grid-column-start: 1;
  grid-column-end: 3;
  /* 行のグリッドラインの指定 */
  grid-row-start: 1;
  grid-row-end: auto;
}

main {
  background-color: #FFFCFF;
  /* 列のグリッドラインの指定 */
  grid-column: 1;
  /* 行のグリッドラインの指定 */
  grid-row: 2 / 3;
}

上記のように簡略化して書くことも可能です（実行結果は変わりません）

grid-column(row)-endにautoを指定すると、grid-column(row)-startで指定したグリッドラインの次のグリッドラインまでの範囲に配置されます。

また、grid-column(row)-startとgrid-column(row)-endはgrid-column(row)という略式プロパティで指定できます。
1 / 4で1番目から4番目のグリッドラインまでというような指定になります。
（1番目から2番目は１というように指定する）

CSS Grid Layoutを作成しましたが、参考になりましたでしょうか。
CSS Grid Layoutの作成をしようとしている人の参考になれば幸いです。