CSS Grid生成CSS Grid Generator
列数・行数・間隔をスライダーで調整し、CSS Gridのレイアウトコードを視覚的に生成。Visually generate CSS Grid layout code by adjusting columns, rows, and gap.
お気に入りについて About favorites
この端末のブラウザにのみ保存され、サーバーには送信されません。 Saved on this device only—never sent to our servers.
使い方・ユースケース How to Use & Use Cases
列数・行数・間隔（gap）をスライダーで調整すると、プレビューにグリッドセルが表示され、対応するCSSコード（display: grid / grid-template-columns / grid-template-rows / gap）がリアルタイムに生成されます。コピーボタンでそのままCSSファイルに貼り付けられます。 Adjust columns, rows, and gap with sliders to see a live grid preview and the matching CSS (display: grid, grid-template-columns, grid-template-rows, gap) generated in real time. Copy it straight into your CSS file.
ギャラリーやカード一覧のレイアウトを組みたいとき、レスポンシブなダッシュボードのグリッドを試作したいとき、Flexboxでは難しい2次元レイアウトをCSS Gridで組みたいときに使えます。 Useful for building gallery or card grid layouts, prototyping a responsive dashboard grid, or laying out two-dimensional designs that are hard to achieve with Flexbox alone.
よくある質問FAQ
生成されるCSSはどのプロパティですか？Which CSS properties are generated?
親要素の`display: grid`、`grid-template-columns`、`grid-template-rows`、`gap`を生成します。列・行は等幅（`repeat(N, 1fr)`）で生成されます。The parent's display: grid, grid-template-columns, grid-template-rows, and gap. Columns and rows are generated as equal-width tracks using repeat(N, 1fr).
列ごとに異なる幅を設定できますか？Can columns have different widths?
本ツールは等幅グリッドの生成に対応しています。列ごとに幅を変えたい場合は、生成された`repeat(N, 1fr)`の`1fr`部分を手動で`2fr`や`200px`などに書き換えてください。This tool generates equal-width tracks. To use different widths per column, manually edit the generated repeat(N, 1fr) part—for example to 2fr or 200px.
対応ブラウザは？Which browsers support CSS Grid?
CSS GridはChrome・Firefox・Safari・Edgeなどすべてのモダンブラウザで利用できます。CSS Grid is supported in all modern browsers, including Chrome, Firefox, Safari, and Edge.
ページを閉じれば、端末内のデータは自動的に消去されます。契約書や顧客資料など、慎重に扱うデータも安心してご利用ください。When you close the page, data on your device is cleared automatically. Safe for sensitive files such as contracts and client documents.
