CSS WEB制作

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

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

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

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

 

目次
  1. gridとは
  2. サンプルコード
  3. まとめ

gridとは

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

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

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

 

サンプルコード

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

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

CSS解説

display: grid; 

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

 

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

この「1fr」の「fr」は、fraction(分割)の略です。

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

という意味です。

 

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

 

そして、もうひとつ例を挙げますと・・・。
「2fr 1fr 1fr」にした場合。
50% 25% 25% の比率で3列にする、というコードとなります。

 

grid-gap: 30px;

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

 

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

 

 

まとめ

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

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

是非試してください!

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

-CSS, WEB制作
-,

© 2024 人生フリーハンド Powered by AFFINGER5