先ほどのページでは flexbox を用いて１方向のレイアウトについて紹介した。

このページでは、下のようなレイアウトをどのように表現するのかについて考えてみる。

タイルのように、縦と横方向の両方に並んでいるレイアウトは flexbox でも可能だが表現するのは少し難しい。

そこで、「grid layout」というものを用いることで視覚的にわかりやすく書く。

grid layout の書き方はいろいろあるのでここでは講師が案件で書いた書き方を示す。

他の書き方は最後に掲載している参考動画を見たり各自で調べたりしてほしい。

grid layout の書き方

あらかじめ、色は定義しておいた。各自 fork して記述していってほしい。

上の写真のように、3 列並びのデザインを作ってみる。

1. display: grid; を宣言する。

flexbox を使用するときにdisplay: flex;を書いたのと同様に、grid layout を使用する時の宣言を書く。

.list {
  display: grid;
}

2. grid-template-columns プロパティを使用する

何列並びにするのかを指定する。

3 列並びにしたいので、repeat(3, 1fr)とした。

1fr の意味は各自で調べてほしい。

3. grid-gap プロパティを使用する。

要素と要素の隙間をどれだけ空けるのか指定する。

今回は 32px 空けたいので、grid-gap: 32px;とした。

下の code sandbox の中央部分をつかんで、左にずらしても、32px の隙間ができていることがわかる。

この 3 つのプロパティを使用することで、記述することができた。

ちなみに、今回作成したものを flexbox だけで作ろうとすると、下のように周りくどい書き方をする必要があることから、grid layout の便利さがわかるだろう。

なお、１列だけの場合は grid layout より flexbox を使用することが多い。