CSS网格生成器

自定义行、列、间距和对齐方式，可视化生成CSS Grid布局。

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.

  4. 4

    Copy the CSS

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

Frequently Asked Questions

What is CSS Grid?
CSS Grid is a two-dimensional layout system for creating complex layouts using rows and columns.
What does fr unit mean?
The fr unit represents a fraction of available space. 1fr = one equal share.
Grid vs Flexbox?
Use Grid for 2D layouts, Flexbox for 1D layouts. They can be combined.
Is my data secure?
Yes. All generation happens in your browser. No data sent to servers.