プログラミング

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

スポンサーリンク

カラム
みなさん、グリッドという言葉を聞くと、Bootstrapやflexをイメージする人が多いかもしれません。

今回は、CSSでグリッドを実装する方法を紹介します。
このCSSグリッドは、画像リストなどのブロック要素がたくさんある場合、
それを複数行にわたって配置する場合にとても便利です。

サンプルコード

//html//

<div(#親要素)>

div(子要素)
div(子要素)
div(子要素)
div(子要素)
div(子要素)



div(子要素)
</div(親要素)>

//css//
#親要素 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 30px;
}

こんな感じで、親要素の中に、同じ大きさのブロック要素(子)がたくさんあるとき、
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を理解する

まとめ

インラインボックスで並べたり、flextなどの使い分けの定義はありませんが、
列の数、列幅の比率、要素間の余白設定が自由自在です!

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

是非試してください!

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

スポンサーリンク

-プログラミング
-, , , , , , ,

© 2022 サカらいふ Powered by AFFINGER5