このツールについて
均等割りの2次元グリッドを生成するツールです。列数・行数はそれぞれ1～12の整数に制限しています。プレビューの要素数は列数と行数の積で、最大144個です。
使い方
- 列数と行数に、それぞれ1～12の整数を入力します。
- 列間隔と行間隔を調整します。
- 自動生成されるグリッドと番号付きの要素を確認します。
- CSSをコピーし、プロジェクトのグリッドコンテナーに適用します。
使用例
- 3列 × 2行では、6個のアイテムを表示します。
- 12列 × 12行で、このページの上限である144個になります。
- 列間隔を24px、行間隔を12pxにすると、方向による余白の違いを比較できます。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 16px;
}仕組みとCSSの解説
repeat(n, 1fr)はn本の均等なトラックを作ります。1frはコンテナーの利用可能な空間の1単位を表します。column-gapは列間、row-gapは行間の間隔を設定し、両者が同じ場合はgapでまとめて指定できます。
主な用途
- カード一覧や画像ギャラリーを作る。
- ダッシュボードの均等なレイアウトを設計する。
- repeat()、fr、gapの役割を学ぶ。
プライバシーについて
入力、計算、CSSの生成、プレビューはすべてお使いのブラウザー内で完結します。入力内容をアップロードせず、バックエンド、データベース、オンラインAPI、外部CDNも使用しません。入力の自動保存も行いません。
FAQ
CSS GridとFlexboxの違いは何ですか？
Gridは行と列を同時に制御する2次元レイアウトに適しています。Flexboxは主に1つの主軸に沿って要素を配置します。
1frは何を意味しますか？
frは残りの利用可能な空間の割合を表します。すべてのトラックを1frにすると、通常は空間を均等に分けます。
repeat(3, 1fr)は何を意味しますか？
1fr 1fr 1frと同じ意味で、均等な3本のトラックを表します。
gapとmarginの違いは何ですか？
gapはグリッドのトラック間の間隔を設定し、コンテナーの外周には余白を追加しません。marginは各要素自身の外側の余白です。
行数と列数の上限が12なのはなぜですか？
各方向を最大12に制限すると、プレビューは最大144要素に収まります。大きすぎる入力でページが重くなるのを防ぐためです。