こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
最近では CSS Grid を使ったレイアウトが当たり前になってきましたが、その中でも便利なプロパティのひとつが grid-auto-flow。
特に grid-auto-flow: dense;を使うと、グリッドの隙間を自動で詰めてくれるレイアウト最適化が可能になります。
この記事では、denseの仕組みや注意点、実際の使いどころを具体例付きで紹介します。
Pinterest風のカードレイアウトや、ECサイトのおすすめ一覧などでとても重宝するので、ぜひ活用してみてください！
grid-auto-flow: dense; とは？
通常、CSS Grid の自動配置ではDOMの順番通りに要素が並び、スペースが空いても後の要素はその隙間には入りません。
しかし grid-auto-flow: dense; を使うと、後続の小さい要素が空いたスペースに“逆戻り”してはまるようになります。
たとえば以下のようなレイアウト
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
この場合、サイズが異なる要素が混在していても、小さい要素は先頭の空きスペースに収まるよう調整されます。
具体的なコード例
以下は grid-auto-flow: dense; を使ったレイアウトのHTMLとCSSです。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
この例では、通常なら空白ができる場所に、後ろの要素が“詰められて”配置されます。
特に .tall や .wide のようなサイズが異なるブロックがあるときに効果がわかりやすいです。
dense を使う上での注意点
- DOMの順番と表示順が変わるため、スクリーンリーダーやSEOの観点で注意が必要です。
- ユーザーが意図しない順番で要素が現れる可能性があります。
- 常に`dense`がベストではなく、視覚的な最適化と意味的な順序を両立する判断が必要です。
おすすめの活用シーン
- Pinterest風の画像ギャラリー
- 商品カードが並ぶECサイトの新着アイテム一覧
- ブログのおすすめ記事エリア
このような場所では、視覚的に無駄なスペースを減らして情報密度を高められるため、grid-auto-flow: dense; は非常に有効です。
まとめ
grid-auto-flow: dense; を使えば、CSSだけで要素を最適に配置して、見栄えと情報密度を同時に高めることができます。
ただし順序の変更によるUXへの影響もあるため、使いどころを見極めて導入するのがコツです。
ぜひ、あなたのレイアウトにも取り入れて、スマートなUIを実現してみてください！
satokotadesignキャンペーン実施中！
