CSSスタジオ

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

ビジュアルエディターでレスポンシブなグリッドレイアウトを構築

設定

px
px
px
%

グリッドテンプレート

1.
2.
3.
1.
2.

一般的な値:

• 1fr - 利用可能なスペースの1分数
• 200px - 固定ピクセルサイズ
• auto - コンテンツに基づいて自動サイズ調整
• minmax(100px, 1fr) - レスポンシブなサイズ調整
• repeat(3, 1fr) - パターンの繰り返し

プリセット

グリッドアイテム

プレビュー

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

現在の設定でプレビュー

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  gap: 16px;
  grid-auto-flow: row;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
  align-content: start;
}