跳到主要内容
Numio

CSS 网格生成器

可视化绘制 CSS 网格布局。设置列和行的尺寸，在单元格上拖动来命名区域，并复制 CSS、HTML 或 Tailwind 代码。

实时预览

3 列 × 3 行

在空白单元格上拖动以添加区域。点击已占用的单元格可选中其区域。

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "header header header"
    "nav    main   aside"
    "footer footer footer";
  gap: 16px;
}

.header {
  grid-area: header;
}

.nav {
  grid-area: nav;
}

.main {
  grid-area: main;
}

.aside {
  grid-area: aside;
}

.footer {
  grid-area: footer;
}

所有操作均在您的浏览器中完成。

格式参考资料

工具页面更新日期：