生成されたCSSコードはそのまま使えますか？

はい。CSS Gridガイドが出力するCSSは標準仕様に準拠しており、CSSファイルやstyle属性にそのままコピー＆ペーストして使用できます。

オフラインでも使えますか？

ページを一度読み込んだあとは、多くの処理がブラウザ内で完結するためネットワーク接続が切れても動作します。ただし初回アクセス時はオンラインが必要です。

デザイン・CSS無料登録不要

CSS Gridガイド

CSS Gridの主要プロパティと値の早見表。2次元レイアウト設計に便利な無料オンラインツール。

入力

結果

--- 親要素 (container) ---
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr auto;
gap: 1rem;
grid-template-areas:
  "header header header"
  "sidebar main main"
  "footer footer footer";

--- 子要素 (item) ---
grid-column: 1 / 3;       /* 1列目から3列目まで */
grid-row: 1 / -1;         /* 1行目から最後まで */
grid-area: header;        /* エリア名指定 */

--- よく使う列指定 ---
repeat(3, 1fr)            3等分
repeat(auto-fill, minmax(200px, 1fr))  レスポンシブ
200px 1fr 200px           サイドバー付き
repeat(12, 1fr)           12カラムグリッド

--- サイズ関数 ---
minmax(200px, 1fr)        最小200px、残り均等
auto-fill                 自動的に埋める
auto-fit                  自動的に伸ばす
fit-content(300px)        最大300pxまで

FAQ

よくある質問

CSS Gridガイドは完全無料です。登録やログイン、課金、アプリのインストールは不要で、ブラウザがあればすぐに利用できます。

こちらもおすすめ

CSS display一覧

CSSのdisplayプロパティの値と挙動を比較解説する無料オンラインツール。

Flexboxガイド

CSS Flexboxの主要プロパティと値の早見表。レイアウト設計の参考に便利な無料オンラインツール。

Gridチートシート

CSS Gridの主要プロパティを一覧表示する無料オンラインツール。

Gridコンテナプロパティ

Gridコンテナプロパティを表示する無料オンラインツール。Gridコンテナプロパティをブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。

border-radiusジェネレーター

CSSのborder-radiusをGUIで視覚的に調整。4隅個別・楕円形の角丸にも対応。コードをコピーしてすぐ使える無料オンラインツール。

Box Shadow生成

CSS box-shadowをGUIで直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。コード即コピーの無料ツール。

読み込み中...