CSS Gridジェネレーター — 2次元レイアウトを構築

CSS GridはCSSの最も強力なレイアウトツールです。ジェネレーターで列・行・ガターを視覚的に定義し、すぐ使えるGridコードを生成します。

Gridの概念

grid-template-columnsは列幅を定義。grid-template-rowsは行の高さ。gap（旧grid-gap）はセル間のスペース。fr（fraction unit）は利用可能なスペースを比例分配します。

auto-fillでレスポンシブGrid

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))はメディアクエリなしでレスポンシブグリッドを作成。利用可能な幅に合わせて列数が自動調整されます。

Grid配置

grid-column: 1 / 3で要素が2列にまたがります。grid-areaで要素に名前を付けて配置。grid-template-areasでレイアウトをテキストで視覚的に記述できます。