デザイン / レイアウト
CSS Gridジェネレーター（ビジュアルgrid-template-areasビルダー）
列、行、間隔を設定し、セルをドラッグしてheader、sidebar、mainなどの名前付きエリアを作成します。grid-template-columns、grid-template-rows、grid-template-areasを含む、そのまま貼り付けられるCSSをコピーできます。
CSS Gridジェネレーター（ビジュアルgrid-template-areasビルダー）: トラックのサイズは、200px 1fr 1frのように入力したとおりに記述され、同じサイズが繰り返される場合はrepeat()にまとめられます。各エリアはgrid-template-areas内の名前になり、空のセルにはドットが入ります。また、grid-areaを使って要素を配置するルールも生成されます。CSSの仕様上、エリアは長方形でなければならず、重ねることはできません。レイアウトはこのブラウザに保存されます。 サーバーへのファイルアップロードは一切なく、100%ブラウザ内でローカル実行します。
- カテゴリ
- 開発者ツール
- 実行回数
- ブラウザ内で
- コスト
- 無料 · 登録不要
- 提供状況
- すぐに使えます
完全にブラウザ内で実行します
セルをドラッグしてエリアを作成します。複数の行や列にまたがるエリアも作成できます。1fr、200px、auto、minmax(100px, 1fr)などのトラックサイズを入力してください。
CSS
.grid {
display: grid;
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: auto 1fr auto;
gap: 16px;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }各子要素に、そのエリアのクラスを指定してください。ドットで表示されたセルは空のままになります。
名前付きエリア
grid-template-areasの各文字列は1行を、各単語は1つのセルを表します。"header header" "sidebar main"とすると、headerが両方の列にまたがります。grid-area: mainを指定した子要素は、mainという名前のすべてのセルを埋めます。名前はクラス名と一致している必要はありませんが、同じ名前にするとCSSが読みやすくなります。
一般的なトラックサイズ
minmax(200px, 1fr)は、列の幅を少なくとも200 pxに保ちながら、拡張できるようにします。autoはコンテンツに合わせます。repeat(auto-fill, minmax(12rem, 1fr))は、収まるだけの列を作成するため、カードグリッドに適したパターンです。CSS clampジェネレーターを使えば、間隔を流動的に設定できます。
使い方
- 列と行の数を選び、それぞれのサイズを入力します。
- セルをドラッグしてエリアを作成し、名前を変更します。
- CSSをコピーし、各子要素にそのエリアのクラスを指定します。
プライバシーと制限事項
レイアウトはブラウザ内で作成されます。
関連ツール
よくある質問
frとは何ですか？
空き領域のうちの1単位を表します。1fr 2frの場合、固定サイズと間隔を差し引いた後の空き領域で、2列目は1列目の2倍の幅になります。
エリアを重ねたり、L字型にしたりできないのはなぜですか？
grid-template-areasで指定できるのは、名前を1回だけ使用した長方形のエリアです。CSS Gridでは要素を重ねられますが、名前付きエリアではなく、明示的なライン番号を使う必要があります。
レスポンシブ対応にするにはどうすればよいですか？
幅の広い画面用に生成されたCSSを使い、狭い画面用にはメディアクエリ内でgrid-template-columnsとgrid-template-areasを定義し直します。
無料ツール · ブラウザ内で · アカウント不要