CSSグリッドジェネレーター

使い方

1. 列（トラックのサイズ）と行（トラックのサイズ）を入力します。2列の場合、200px 1frは、固定のサイドバーと柔軟なメインの領域を作ります。
2. 列の間隔（px）と行の間隔（px）を設定し、コンテナーにクラス名を付けます。
3. 塗る領域の名前に名前を入力し、塗るを選んだままで、その領域に属するセルをクリックします。セルを消すには消すを選びます。
4. CSSの枠をコピーするか、プレビューを確かめてから、ルールをスタイルシートに貼り付けます。

トラックのサイズとrepeat()

各トラックは格子の中のサイズです。pxや%で表す長さ、残りの空間を数に応じて分け合う柔軟なサイズのfr、auto、min-content、max-contentのいずれかです。minmax(最小, 最大)は、トラックに範囲を与えます。CSS Grid Layout仕様（英語）に、それぞれのサイズの決め方が示されています。

repeat(3, 1fr)は、同じトラックを3回書きます。repeat(auto-fill, minmax(200px, 1fr))は、箱の幅に収まるだけのトラックを作ります。その数は箱によって決まるため、auto-fillまたはauto-fitの繰り返しのすべてのトラックには固定サイズが必要で、そこに名前付きの領域は描けません。

grid-template-columns: 200px 1fr;  grid-template-rows: auto 1fr auto;  gap: row-gap column-gap;

名前付きの領域

grid-template-areasプロパティは、格子の行ごとに1つの文字列を受け取ります。文字列の中の名前は、その行のセルで、ピリオドは、どの領域にも属さないセルを表します。ブラウザはL字形や二つに分かれた塊に名前を置けないので、各名前は一つの長方形を埋めなければなりません。

名前は、コンテナーによって格子上に配置され、各子要素はgrid-areaで自分の位置を取ります。このツールは名前ごとに1つのルールを書くので、そのクラスをもつ要素はそのセルを埋めます。

• トラックの行ごとに名前の行を一つ使い、どの行も名前の数を同じにします。
• ヘッダー、サイドバー、メインなど、ページの部分を表す名前を選んでください。ルールはその名前をクラスとして書かれるからです。

よくある質問