CSS Grid Layout【基礎編】思い通りにレイアウト！

このページに来てくれたということはCSSは書けるけれども、floatだとどうしてもレイアウトが崩れてしまう、flexboxを覚えてfloatで頑張っていたころよりはレイアウトが組みやすくなったが、それでも不規則な並びに対応しようとすると大変、という具合ではないでしょうか。

CSS Grid Layoutを覚えるとflexboxと組み合わせることもでき、コーディングの幅が広がります。

特に細かな表などを組む際には強い見方になってくれるでしょう。
是非この機会にマスターして綺麗なレイアウトを組めるようになりましょう。

float, flexboxとの違い

CSS Grid Layoutの特徴として何が違うかというと、
float, flexboxは一次元（横なら横、縦なら縦というように１つの方向に並びコンテンツが折り返す）に対し、
CSS Gridは二次元（このコンテンツは横、これは縦というように自由）に指定することができます。

それではまず最初に簡単なレイアウトを組んでみましょう。

HTMLの配置

<div class="container">
  <div class="itemA">A</div>
  <div class="itemB">B</div>
  <div class="itemC">C</div>
  <div class="itemD">D</div>
  <div class="itemE">E</div>
  <div class="itemF">F</div>
</div>

並べたい要素 itemA ~ itemF を配置し、それを container で囲みます。

CSS Grid Layout

.container {
  display: grid;
  grid-template:
  "itemA itemA itemA" 50px
  "itemB itemC itemD" 50px
  "itemB itemC itemE" 50px
  "itemF itemF itemE" 50px
  / 50px  50px  50px;
}
.itemA {
  grid-area: itemA;
  background: #3B5998;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.itemB {
  grid-area: itemB;
  background: #DF4A32;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.itemC {
  grid-area: itemC;
  background: #00B0ED;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.itemD {
  grid-area: itemD;
  background: #008FDE;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.itemE {
  grid-area: itemE;
  background: #EB4654;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.itemF {
  grid-area: itemF;
  background: #00C300;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

↓こうなります。

※CSSの記述方法は2種類あります。

今回は下記のように個人的に可視化しやすいと思っている書き方で書いてみました、お好みで使い分けてください。

.container {
  display: grid;
  grid-template:
  "itemA itemA itemA" 50px
  "itemB itemC itemD" 50px
  "itemB itemC itemE" 50px
  "itemF itemF itemE" 50px
  / 50px  50px  50px;
}