CSSグリッドジェネレーター

行、列、間隔、配置をカスタマイズしてCSSグリッドレイアウトを視覚的に生成します。

1
2
3
4
5
6
7
8
9

グリッドプロパティ

#f0f0f0

トラックサイズ

C1
C2
C3
R1
R2
R3

1fr、2fr、100px、auto、minmax(100px, 1fr)、repeat(3, 1fr)などの値を使用

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 10px;
}
すべてのレイアウト生成はブラウザで行われます。データはサーバーに送信されません。

How to Use This Tool

  1. 1

    Set grid dimensions

    Choose the number of columns (1-8) and rows (1-8) for your grid layout.

  2. 2

    Customize track sizes

    Edit individual column and row sizes using CSS values like 1fr, 200px, auto, or minmax().

  3. 3

    Adjust alignment & gaps

    Use justify-items, align-items, justify-content, and align-content to control alignment. Set column and row gaps.

  4. 4

    Copy the CSS

    The generated CSS updates in real-time. Click Copy to copy the complete grid CSS to your clipboard.

Frequently Asked Questions

What is CSS Grid?
CSS Grid is a two-dimensional layout system for creating complex web layouts using rows and columns.
What does fr unit mean?
The fr unit represents a fraction of the available space. 1fr means one equal share, 2fr takes twice the space of 1fr.
When should I use Grid vs Flexbox?
Use CSS Grid for two-dimensional layouts. Use Flexbox for one-dimensional layouts. They can also be combined.
Is my data secure?
Yes. All layout generation happens entirely in your browser. No data is sent to any server.