🧩
CSSのround()でGridアイテムが丁度収まる幅を指定する(grid + fit-content + auto-fit)
fit-contentが効かない問題
コンテンツ内容に合わせて幅を指定する場合に真っ先に思い浮かぶのが fit-content
ですが、grid-template-columns: repeat(auto-fit, {width}px);
を指定した要素に fit-content
を指定すると1列になってしまいます。
もちろん幅が定まるような値を指定すれば fit-content
は効いてくれるのですが、今回はどうしても auto-fit
が使いたかったのです。
round()で解決
解説
round()
シンタックス
round(端数をどう処理するか, 幅, 幅の間隔)
となっていますが、最終的に出てくる値は "幅の間隔" の整数倍の値です。
第一引数は省略可能で以下の値をとります。
-
up
- 切り上げ -
down
- 切り捨て -
nearest
- デフォルト値。最も近い値に丸める -
to-zero
- ゼロに向かって丸める
そして、第二引数の "幅" にたいして、第三引数の "幅の間隔" の倍数になるように処理された値になります。
例
round(up, 100vw, 30px);
// 画面幅が90pxの時90px
// 画面幅が100pxの時120px
round(down, 100vw, 30px);
// 画面幅が90pxの時90px
// 画面幅が100pxの時90px
round(nearest, 100vw, 30px);
// 画面幅が89pxの時90px
// 画面幅が91pxの時90px
実装
以下のスタイルで画面幅に合わせて収まるだけ横に並ぶグリッドコンテナができます。
display: grid;
grid-template-columns: repeat(auto-fit, 220px);
grid-auto-rows: 220px;
gap: 12px;
gapが12pxなので一つ要素が増えるたびに232px(220px + 12px)ずつ増えます。
ただしgapの数は要素数-1になるのでそのまま指定すると12px余分に増えてしまいます。
width: round(down, 100vw, 232px);
そこで画面幅+12pxに収まるような232pxの倍数を求め、そこから12px引くことで丁度収まるようになります。
width: calc(round(down, calc(100vw + 12px), 232px) - 12px);
おしまい
CSS、しらないうちにできること増えてる
Discussion