グリッドレイアウト

画面幅に応じて1〜3カラム

アイテム1
アイテム2
アイテム3
アイテム4
アイテム5
アイテム6

不等間隔グリッド

大きなアイテム
アイテム1
アイテム2
アイテム3
アイテム4

auto-fit

子要素の幅は常に300px

アイテム1
アイテム2
アイテム3
アイテム4
アイテム5
アイテム6
アイテム7
アイテム8

auto-fit：要素1つの場合

子要素の幅は常に300px。
右側に中途半端な余白ができてしまうのが気になるところ。

アイテム1

auto-fill

子要素の幅が最小で300px。最大で1fr。
子要素の数がカラム数を超える場合には少ない指定でいい感じに配置されて便利。

アイテム1
アイテム2
アイテム3
アイテム4
アイテム5
アイテム6
アイテム7
アイテム8

子要素の数が少ない場合を想定する必要があるときには、幅いっぱいになっtしまうので向かない。
→ ブレイクポイントごとにカラム数を指定する用法がよさそう。

アイテム1

見出し

説明文
gridで横並びにした子要素でmargin-inline-endを使って右側画面いっぱいに領域を拡大しようとすると、親要素の幅を参照できず画面を超えて広がってしまう。 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
画像alt