CSS Gridジェネレーター

ライブプレビューとコード生成付きでCSS Gridレイアウトを作成

Gridコンテナプロパティ

列数 3

列サイズ

行数 3

行サイズ

gap (px) 10

justify-items

align-items

アイテム数 6

Gridアイテムプロパティ

アイテム選択

grid-column-start

grid-column-end

grid-row-start

grid-row-end

レイアウトプリセット

ライブプレビュー

生成されたCSS

全ての処理はブラウザ内で行われます。データはサーバーに送信されません。

使用例

2カラムレイアウト

CSS Gridを使用してコンテンツとサイドバーのシンプルな2カラムレイアウトを作成。

ダッシュボードグリッド

グリッドエリアを使用して異なるサイズのウィジェットでダッシュボードレイアウトを構築。

画像ギャラリー

均等サイズのセルでレスポンシブな画像ギャラリーグリッドを作成。

機能

ライブビジュアルプレビュー

プロパティを調整するとリアルタイムでGridレイアウトが更新されます

使用可能なCSSコード

Gridコンテナと個別アイテムのクリーンなCSSコードを取得

レイアウトプリセット

2カラム、ダッシュボード、ギャラリーなどの一般的なGridプリセットで素早く開始

Gridアイテムスパン

grid-columnとgrid-rowで複数の列や行にまたがるアイテムを設定

使い方

Gridプロパティを設定

列数と行数、サイズ（fr、px、auto）、gap、配置を選択します。

アイテムを設定

アイテムを追加し、スパン用のgrid-columnとgrid-rowの開始/終了を設定します。

CSSをコピー

生成されたCSSコードをコピーしてプロジェクトで使用します。

よくある質問

Gridは行と列を同時に2次元で制御する必要がある場合に最適です。Flexboxはコンポーネント内の単一軸の配置に向いています。

利用可能なスペースの割合を意味します。1fr 2frと書くと、2番目が1番目の2倍の幅になる2つの列が作成されます。

いいえ。すべてブラウザ内で動作します。何もマシンから出ません。