格子状に敷き詰める——Grid

前のチャプターで、Flexboxを使ってカードを一列に並べられるようになりました。このチャプターでは、もう一つのレイアウト道具「Grid(グリッド)」を学びます。

FlexboxとGrid、何が違う?

まず、2つの道具の役割の違いから。Flexboxは「一列に並べる」道具でした。横なら横、縦なら縦——一方向の整列が得意です。それに対してGridは「格子状に敷き詰める」道具です。縦と横、二方向を同時に設計します。

イメージは、Flexboxが「一列に並んだ行列」、Gridが「マス目のあるカレンダー」。写真ギャラリー、商品一覧、Instagramの投稿一覧のような「何行×何列」のレイアウトは、Gridの出番です。

どちらが優れているという話ではなく、一列ならFlexbox、マス目ならGrid、と使い分けます。実務でも両方を場面で使い分けるのが普通です。

Gridの基本形

書き方はFlexboxとよく似ています。並べたい要素を親の箱で囲み、親に指定を書く——「親に旗を立てる」の考え方はまったく同じです。

display: grid; でGridのスイッチを入れ、grid-template-columns で「列の設計図」を書きます。1fr 1fr 1fr は「同じ幅の列を3本」という意味——frは fraction(分数)の略で、「利用できる幅を1:1:1で分け合う」と読みます。6個の要素は、3列のマス目に上から順に流し込まれて、自動的に2行×3列になります。行の数を自分で数えて指定する必要はありません。列だけ設計すれば、行は中身の数に応じて勝手に増える——ここがGridの気持ちいいところです。

gap はFlexboxで学んだものと同じです。マス目同士の間隔を一括で空けてくれます。同じプロパティが両方で使える——道具は違っても文法は繋がっています。

列の設計図を書き換える

grid-template-columns の書き方を変えると、マス目の設計が変わります。