跳到主要內容
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;
}

所有操作都在您的瀏覽器中完成。

格式參考資料

工具頁面更新日期：