Gridレイアウトのまとめ

Gridレイアウトはタイル型に要素を配置したいときに適している。
コンテナーと呼ばれる親要素の中に、並べたい子要素を入れる。

Gridの書き方

「display: grid;」を適用

この時点ではアイテムは縦に並んでいるだけになる。

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

grid-template-columnsプロパティ

各アイテムの幅を指定することで、横並びに設定できる。
上の例に対してアイテム幅を各200pxずつで並べるように指定している。

「grid-template-columns: 200px 200px 200px;」と記述

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

アイテムの境界をわかりやすくするためにボーダーを設定している。

gapプロパティ

アイテムの間の余白を指定する。

「gap: 10px;」と記述

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

アイテムの間に10pxの余白ができた。

比率で指定できる単位「fr」

「grid-template-columns: 1fr 1fr 1fr;」と記述

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

frで指定すると、画面幅に合わせて伸縮するようになる。

grid-template-rowsプロパティ

アイテムの高さを設定する。半角スペースで区切って必要な行数分の高さを指定する。

「grid-template-rows: 200px 200px;」と記述

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

アイテムの高さが200pxになった。

グリッドの実用例

グリッドで画像を並べてみる

レイアウトでよく使われるカードというレイアウトを作ってみる。
画像の下に関連するテキストが配置されているカードを複数枚並べてみる。

divタグの中にimgタグとpタグを入れる

動物界のワルモン大集合

わるヤギ

世の中の牧草はすべて俺のもの

わるロバ

絶対に人なんて乗せてやらないぞ

わるゼブラ

白黒つけるまで追いかけるぜ

アイテム幅をピクセルで指定しているので、画面幅が変わっても伸縮しません。

幅に合わせて表示数が調整されるレイアウト

コードの記述：

display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 30px;

画面幅を変えてみてください。画面に合わせて1行の表示数が変わります。

ワルモンはまだまだいるぜ

わるジカ

邪魔するもんはどつくで〜

わるモンキー

わいと一緒に怠けようや

わるギツネ

人を騙すのやめらんない

わるパンダ

もう見世物になるんはヤメや

わるウシ

エブリデイ・パーティー！

わるカバ

近づくとケガするぜ