CSSグリッドジェネレータ
ビジュアルエディタでCSSグリッドレイアウトを構築します。列、行、隙間を定義し、セルを複数のエリアにまたがらせることができます。
Preview (click cells to span)
12px
CSS
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
gap: 12px;
}CSSグリッドジェネレータの使い方
- 1グリッドレイアウトの列数と行数を設定します。
- 2コントロールを使用して列幅と行の高さを調整します。
- 3クリックしてドラッグし、セルを複数の列または行にまたがらせます。
- 4グリッドセル間の隙間を設定します。
- 5生成されたCSSグリッドコードをコピーします。
Zenovayアナリティクス
関連ツール
CSSグラデーションジェネレータ
ビジュアルエディタで美しいCSSグラデーションを作成します。直線、放射状、円錐状のグラデーションに対応しています。CSSボックスシャドウジェネレーター
ビジュアルコントロールでCSSボックスシャドウを設計します。オフセット、ブラー、スプレッド、カラーを調整できます。CSSボーダーラディウスジェネレーター
カスタムボーダーラディウス値をビジュアルコントロールで作成します。コーナーをリンクまたはアンリンクして素早く調整できます。CSS Flexboxプレイグラウンド
CSS Flexboxレイアウトを視覚的に学習・生成できます。方向、配置、折り返し、ギャップをリアルタイムで調整できます。よくある質問
CSS Gridとは何ですか？▾
CSS Grid Layoutはウェブ用の2次元レイアウトシステムです。floatやpositioningを使わずに行と列でアイテムを配置し、複雑なレイアウトを簡単に設計できます。
grid-template-columnsとgrid-template-rowsはどのように機能しますか？▾
grid-template-columnsは列の数と幅を定義し、grid-template-rowsは行の数と高さを定義します。柔軟な比率にはfr単位、固定サイズにはpx、コンテンツベースのサイズにはautoを使用します。
fr単位とは何ですか？▾
fr（fraction）単位はグリッドコンテナの利用可能スペースの割合を表します。例えば、1fr 2frは2列を作成し、2番目の列が1番目の2倍の幅になります。
アイテムを複数のセルに跨がせるにはどうすればよいですか？▾
グリッドセルをクリックしてスパンを開始し、隣接するセルをクリックして拡張します。ツールは選択したアイテムのgrid-columnとgrid-rowのスパンルールを生成します。
スマートフォンでこのツールを使えますか？▾
はい、CSS Gridジェネレーターは最新のモバイルブラウザで動作します。グリッドレイアウトを視覚的に設定して、どのデバイスでもCSSをコピーできます。
生成されたCSSにはHTMLマークアップも含まれますか？▾
はい。ツールはCSSグリッドスタイルと一致するHTML構造の両方を生成するため、完全に機能するグリッドレイアウトをプロジェクトに直接コピーできます。
グリッドセル間のギャップをカスタマイズできますか？▾
はい。行と列のギャップ値を調整してグリッドアイテム間のスペースを制御できます。ツールはすべての最新ブラウザでサポートされている標準CSSのgapプロパティを使用します。