【CSS】display: grid; を使って、簡単にグリッドを実装しよう

今回はCSSでgrid（グリッド）を実装する方法を紹介します。

この grid は、画像やカードデザインのブロック要素をたくさん並べたりする場合に役立ちます。

flex でも実装できますが、grid もとても便利ですので紹介します。

gridとは

グリッド線をイメージするとわかりやすいと思います。

そうです。あの格子状のマス目のことです。

列幅や列数、行幅や行数、を自由自在にきめることができるのです。

サンプルコード

See the Pen
grid-sample by t.h (@tomtom15)
on CodePen.

こんな感じで、親要素の中に、同じ大きさのブロック要素（子要素）がたくさんあるとき、
CSSグリッドを使うと、行と列を使ってキレイに並べることができます。

CSS解説

display: grid;　

グリッドを使うコードです。

grid-template-columns: 1fr 1fr 1fr;

この「１fr」の「fr」は、fraction(分割）の略です。

このコードの意味は、
１：１：１の均等比率で、３列のグリッドを実装します。

という意味です。

なので、仮にこれが「1fr 1fr 1fr 1fr」となると、４列になります。

そして、もうひとつ例を挙げますと・・・。
「２fr 1fr 1fr」にした場合。
５０％　２５％　２５％　の比率で３列にする、というコードとなります。

grid-gap: 30px;

これは要素間の余白設定です。

上記の設定方法はほんの１例ですので、理解を深めたい人はこちらもどうぞ！
グリッドCSSを理解する

まとめ

インラインブロックにして並べたり、flexで並べたり、方法はいろいろありますが、
gridは列の数、列幅の比率、要素間の余白設定が自由自在です！

並べたい要素の数が多いときや、規則正しく並べたいときは、display: grid; がおすすめだと個人的には思います。

是非試してください！

画像を並べるときの関連記事も載せておきます！