CSS · GRID

CSS Grid 可视化编辑器

交互式配置 grid-template-rows / columns / gap / areas，实时预览并一键导出 CSS 代码。

行 (Rows)

列 (Columns)

行间距 (row-gap):px列间距 (column-gap):px

命名区域 (grid-template-areas) — 可选

实时预览

.container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px 8px;
}