CSS工作室

CSS网格生成器

使用可视化编辑器构建响应式网格布局

设置

px
px
px
%

网格模板

1.
2.
3.
1.
2.

常用值:

• 1fr - 可用空间的一份
• 200px - 固定像素大小
• auto - 根据内容自动调整大小
• minmax(100px, 1fr) - 响应式大小
• repeat(3, 1fr) - 重复模式

预设

网格项目

预览

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

使用当前设置预览

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  gap: 16px;
  grid-auto-flow: row;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
  align-content: start;
}