▦ CSS Grid ジェネレーター

列と行の数、マス目の間隔をスライダーで調整すると、その場でプレビューと一緒にgrid-template CSSが作られます。カード一覧・ギャラリー・ダッシュボードのような規則的なレイアウトを手計算する必要なく、コピーしてそのまま貼り付けられます。

使い方

1. 列(columns)と行(rows)の数を入力してグリッドの骨組みを作ります。
2. 間隔(gap)スライダーでマス目の余白を調整します。横・縦を別々に指定したいときは「同じにする」のチェックを外してください。
3. プレビューでマスの配置を確認してから、下のCSSをコピーします。
4. 貼り付けた親要素の中に子カードを入れると、グリッドどおりに自動配置されます。

よくある質問

1frとはどういう意味ですか?

frはfraction(比率)の略で、余ったスペースを均等に分けた1つ分を表します。repeat(3, 1fr)は親要素の幅を3つに等分します。

画面サイズに応じて列数が自動で変わるようにするには?

grid-template-columnsをrepeat(auto-fit, minmax(200px, 1fr))に変えると、幅が狭くなると列数が自動で減るレスポンシブグリッドになります。案内文にも例があります。

生成されたCSSをそのまま信頼していいですか?

標準のCSS Gridプロパティだけを使うので、最新のブラウザでそのまま動作します。ただしプレビューはサンプルのマスで見せているだけなので、実際のコンテンツの高さや配置はプロジェクトで確認する参考用としてお使いください。