g3n-data
EN
← 全部工具

CSS Grid 視覺版面產生器

在視覺格線上配置命名區塊，預覽實際 CSS Grid 版面，並在本機複製對應的 CSS 與 HTML。

01 / 版面地圖

畫出你的版面

3 × 3

拖曳空白格建立區塊；拖曳區塊本體可移動，拖曳右下角 ↘ 可調整大小。鍵盤可選取區塊，再用下方欄位精確調整。地圖使用等寬格，右側才是實際 CSS 預覽。

02 / 尺寸

欄、列與間距

各欄尺寸

欄 1
欄 2
欄 3

各列尺寸

列 1
列 2
列 3

每個軌道最多 2000px，或 0.1–12fr。minmax(0, fr) 可讓內容較容易縮小；實際溢出仍須在你的版面測試。

03 / 區塊

調整區塊

4 / 16

04 / 實際預覽

看看瀏覽器怎麼排

header範例內容
sidebar範例內容
main範例內容
footer範例內容

此寬度只改變預覽容器，不會建立 media query。卡片外觀僅供辨識；實際列高仍取決於你的內容。

05 / 可複製結果

帶回專案

CSS

.layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 12px 12px;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}
.layout > .header { grid-area: header; }
.layout > .sidebar { grid-area: sidebar; }
.layout > .main { grid-area: main; }
.layout > .footer { grid-area: footer; }

HTML

<div class="layout">
  <div class="header">header</div>
  <div class="sidebar">sidebar</div>
  <div class="main">main</div>
  <div class="footer">footer</div>
</div>

HTML 閱讀順序

  1. header
  2. sidebar
  3. main
  4. footer

HTML 依畫面由上到下、由左到右排列。請在實際內容中檢查語意、閱讀順序與 Tab 順序。所有配置僅在這個瀏覽器頁面中處理。

如何使用這個工具

選擇範例或空白格線，選取兩格建立矩形區塊；拖曳區塊可移動，拖曳角落把手可調整大小。鍵盤可使用欄位精確編輯。複製前比對實際預覽、CSS 與 HTML。

不適合用在什麼情況

本工具只產生單一格線，不建立響應式斷點。畫面位置不能證明語意、閱讀或鍵盤順序正確；請以實際內容、縮放與窄螢幕測試。

一維排列可試用 Flexbox 視覺產生器

閱讀實作指南 →