What is CSS Grid and when should I use it?

CSS Grid is a two-dimensional layout system that lets you control both rows and columns simultaneously. Use it for page-level layouts, card grids, image galleries, and any design where you need precise control over both axes. For simpler one-dimensional arrangements (a row of buttons, a nav bar), CSS Flexbox is usually the better choice.

What is the difference between justify-items and justify-content in Grid?

justify-items controls how individual grid items are aligned inside their grid cells (along the inline/row axis). justify-content controls how the entire grid track is aligned within the grid container when there is extra space. Think of justify-items as per-cell alignment and justify-content as overall grid positioning.

What does fr mean in grid-template-columns?

fr stands for 'fractional unit' — it represents a fraction of the available free space in the grid container. For example, repeat(3, 1fr) creates three equal columns that share all available space. 1fr 2fr creates two columns where the second is twice as wide as the first. It is similar to flex-grow in Flexbox.

What is the difference between align-items and align-content in Grid?

align-items sets how items are aligned within their individual grid cells (cross axis). align-content distributes extra space between grid rows as a whole — it only has effect when the grid has more height than its rows need. If your rows exactly fill the container, align-content has no visible effect.

Does the CSS Grid Generator work offline?

Yes, the tool runs entirely in your browser with no server requests. You can even save the page and use it without an internet connection. The generated CSS is standard and works in all modern browsers.

CSS网格生成器

可视化设计CSS网格布局并即时复制生成的CSS代码。

容器属性

grid-template-columns

grid-template-rows

gap

justify-items

align-items

justify-content

align-content

6 项目

预览

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

生成的CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 16px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
  align-content: start;
}

使用方法

可视化设计CSS网格布局并即时复制生成的CSS代码。

1Set grid-template-columns using presets like repeat(3, 1fr) or enter a custom value.
2Configure grid-template-rows and gap to define row height and spacing.
3Adjust justify-items and align-items to control item placement within cells.
4Use justify-content and align-content to position the whole grid in its container.
5Add or remove items to preview different layouts, then copy the generated CSS.

主要功能

Column and row presets with custom input — use common grid patterns or enter any valid CSS value
Live visual preview — see exactly how your grid looks as you change properties
Full alignment control — configure justify-items, align-items, justify-content, and align-content
One-click CSS copy — get clean, ready-to-paste CSS with all seven grid properties

常见问题

了解更多

CSS Grid Generator Guide — Build Grid Layouts Visually