CSS Gridジェネレーター

fr は「利用可能な空きスペースの fraction（分数）」を表します。px や auto など固定サイズの列がスペースを消費した後、残りの幅を分数で分割します。grid-template-columns: 1fr 2fr 1fr と指定すると3列が作られ、中央列は左右の列の2倍の幅になります。fr を使うことで、メディアクエリなしでさまざまな画面幅に適応する流動的なグリッドを作る推奨の方法となっています。

トラックサイズをスペースで区切って並べます。grid-template-columns: 200px 1fr 1fr は 200px の固定サイドバーと2つの等幅流動カラムを作ります。単位を混在させることもできます。1fr auto 1fr は中央列をコンテンツの幅に縮小させます。repeat() 短縮記法で繰り返しを簡潔に書けます。repeat(3, 1fr) は 1fr 1fr 1fr と同じです。このツールは CSS 出力に正しい短縮記法を生成します。

gap（旧 grid-gap）はグリッドトラック間にスペースを追加しますが、グリッドの外縁には追加しません。これはほぼ常に望ましい動作です。コンテナの外側に余分なパディングが付かず、セル間のガターを均等に保てます。margin は個々のグリッドアイテムの周囲にスペースを追加するため、端のアイテムでは不均一になり、コンテナ全体のサイズにも影響します。ガターには gap を、レイアウト全体の余白にはグリッドコンテナへの padding を使いましょう。

アイテムに grid-column-start と grid-column-end を設定します。例えば grid-column: 1 / 3 とするとアイテムは1番目のラインから3番目のラインまで広がり、2列分を占めます。span キーワードも使えます。grid-column: span 2 と書くと同じ結果になります。行方向も同様で grid-row を使います。このツールでグリッドアイテムを選択して start/end 値を設定すると、正しい CSS が自動で生成されます。

どちらも repeat() と組み合わせて、コンテナに収まるだけのトラックを生成します。repeat(auto-fill, minmax(200px, 1fr)) のように使います。違いはアイテムがすべての列を埋めない場合に現れます。auto-fill は空の列をグリッド内に残してトラック構造を維持します。auto-fit は空の列をゼロに折り畳み、埋まっているアイテムが残りのスペースを使えるように広がります。レスポンシブなカードグリッドでは、auto-fit の方が自然な挙動になることが多いです。

grid-template-areas を使うと、ASCII アートのような視覚的なマップでレイアウトを定義できます。例えば grid-template-areas: "header header" "sidebar content" "footer footer" と記述し、各アイテムに grid-area: header や grid-area: sidebar を割り当てます。これにより複雑なレイアウトが読みやすくなり、メディアクエリで grid-template-areas を再定義するだけで簡単に構造を変更できます。

いいえ。すべての処理はブラウザ内で動作します。グリッドの設定がお使いのデバイスの外に出ることはありません。