CSS Gridプレイグラウンド

CSS Gridのプロパティを実際に操作しながら動作を確認できるインタラクティブなツール。グリッドレイアウトの設定を変更して、Pure CSS・Tailwind CSS・SCSSのコードを自動生成します。

使い方

列数・行数を設定してグリッドの基本構造を決定

ギャップ（間隔）を調整してレイアウトを微調整

アイテムを追加・削除してプレビューを確認

個別アイテムの配置やサイズを設定

生成されたCSS・Tailwind・SCSSコードをコピー

主な機能

リアルタイムプレビュー表示

全てのCSS Gridプロパティに対応

Pure CSS、Tailwind CSS、SCSSコード生成

グリッドアイテムの動的追加・削除

直感的なセレクトボックス操作

レスポンシブ対応のプレビュー

グリッドコンテナプロパティ

列数:

行数:

選択中のアイテム

アイテム 1

Grid Column

Current: auto

Grid Row

Current: auto

Align Self

Justify Self

auto

Controls horizontal positioning within the grid cell

Align Self

auto

Controls vertical positioning within the grid cell

グリッドコンテナプロパティ

列間隔 (px)

8px

0pxTight50px

行間隔 (px)

8px

0pxTight50px

Align Items

Justify Items

stretch

Default horizontal alignment for all grid items

Align Items

stretch

Default vertical alignment for all grid items

プレビュー

3×3 grid

アイテム 1

アイテム 2

アイテム 3

生成されたコード

Pure CSS

/* Grid Container Styles */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  column-gap: 8px;
  row-gap: 8px;
  justify-content: stretch;
  align-content: stretch;
  justify-items: stretch;
  align-items: stretch;
  grid-auto-flow: row;
}

/* Grid Item Styles */
.grid-item-1 {
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
  align-self: auto;
}

.grid-item-2 {
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
  align-self: auto;
}

.grid-item-3 {
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
  align-self: auto;
}

よくある質問 (FAQ)

CSS Gridは、2次元のレイアウトシステムで、行と列を使って要素を配置できる強力なCSSの機能です。複雑なレイアウトを簡単に作成できます。

Flexboxは1次元（行または列）のレイアウトに適しており、CSS Gridは2次元（行と列）のレイアウトに適しています。用途に応じて使い分けることが重要です。

はい、生成されたコードはそのままWebサイトやアプリケーションで使用できます。Pure CSS、Tailwind CSS、SCSSの3つの形式から選択できます。

各グリッドアイテムの grid-column、grid-row プロパティを個別に設定することで、自由に配置をカスタマイズできます。

プレビューはレスポンシブ対応していますが、実際のレスポンシブデザインの実装には、メディアクエリを使ってブレークポイントごとに異なるグリッド設定を適用する必要があります。