CSS Grid ジェネレーター

Q: ブラウザサポート？

はい、全てのモダンブラウザで対応。

Q: GridとFlexboxの併用？

はい、完璧に補完し合います。

ビジュアルCSS Gridレイアウトビルダー。

プリセット:

列 (3)

行 (2)

列間隔: 16px行間隔: 16px

横揃え縦揃え

プレビュー

CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}

.grid-item {
  padding: 16px;
  background: #e2e8f0;
  border-radius: 8px;
}

HTML

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

無料 CSS Grid ジェネレーター

インタラクティブにCSS Gridレイアウトを構築。

プロパティ参照

プロパティ	説明	例
grid-template-columns	列サイズ	1fr 1fr 1fr
grid-template-rows	行サイズ	auto 1fr auto
gap	間隔	16px
justify-items	水平配置	stretch
align-items	垂直配置	stretch

FAQ

CSS Gridとは？

CSS Gridは二次元レイアウトシステムです。

GridとFlexboxの違い？

Gridは2D、Flexboxは1Dです。

"fr"の意味は？

"fr"は利用可能なスペースの一部を表します。

ブラウザサポート？

はい、全てのモダンブラウザで対応。

GridとFlexboxの併用？

はい、完璧に補完し合います。

その他のツール

📐CSS Flexbox Generator 🌈CSSグラデーション生成 📐Em/Px Converter

CSS Grid ジェネレーター

無料 CSS Grid ジェネレーター

プロパティ参照

FAQ

関連ツール

その他のツール

Recommended

最新情報を受け取る