設計 / 版面配置

CSS Grid 產生器（視覺化 Grid-Template-Areas 建構器）

設定欄、列與間距，拖曳儲存格建立 header、sidebar、main 等具名區域，並複製含有 grid-template-columns、grid-template-rows 與 grid-template-areas、可直接貼上的 CSS。

CSS Grid 產生器（視覺化 Grid-Template-Areas 建構器）: 網格軌道尺寸會依照輸入內容寫入，例如 200px 1fr 1fr；重複的尺寸會轉換為 repeat()。每個區域都會成為 grid-template-areas 中的名稱，空白儲存格會以句點表示，並產生使用 grid-area 放置元素的規則。依照 CSS 的要求，區域必須是矩形且不能重疊；版面配置會記錄在此瀏覽器中。 全程在瀏覽器中於本機執行，檔案不會上傳至伺服器。

分類
開發者工具
使用次數
在瀏覽器中
費用
免費・免註冊
可用狀態
可立即使用
CSS grid 產生器本機處理

全程在瀏覽器中執行

拖曳跨越儲存格以建立區域；區域可以跨越數列和數欄。輸入 1fr、200px、auto 或 minmax(100px, 1fr) 等軌道大小。

CSS

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

.header { grid-area: header; }

.sidebar { grid-area: sidebar; }

.main { grid-area: main; }

.footer { grid-area: footer; }

為每個子元素指定其區域的 class。顯示圓點的儲存格會保持空白。

命名區域

grid-template-areas中的每個字串代表一列，每個單字代表一個儲存格："header header" "sidebar main"會讓標題橫跨兩個欄。設定grid-area: main的子元素，會填滿每個名為main的儲存格。名稱不必與類別名稱相符，但保持一致能讓CSS更容易閱讀。

常見的軌道尺寸

minmax(200px, 1fr)會讓欄寬至少維持200 px，但也能繼續延伸；auto會配合內容調整；repeat(auto-fill, minmax(12rem, 1fr))會建立能容納的最大欄數，適合用於卡片網格。間距可以透過CSS clamp產生器製作成流動尺寸。

使用方式

  1. 選擇欄數與列數，並輸入各自的尺寸。
  2. 拖曳儲存格建立區域，再重新命名。
  3. 複製 CSS，並為每個子元素指定其區域的 class。

隱私與限制

版面配置會在您的瀏覽器中建立。

相關工具

CSS clamp()Box ShadowCSS格式化工具Flexbox裁切路徑

常見問題

fr 是什麼意思？

代表可用空間的一個分量：扣除固定尺寸與間距後，1fr 2fr 會讓第二欄的寬度變成第一欄的兩倍。

為什麼區域不能重疊或呈 L 形？

grid-template-areas 只接受矩形，而且每個名稱只能使用一次。CSS grid 可以放置重疊項目，但必須使用明確的網格線編號，而不是具名區域。

如何讓版面具備響應式效果？

將產生的 CSS 用於寬版配置，並在媒體查詢中針對窄螢幕重新定義 grid-template-columns 與 grid-template-areas。

免費工具・使用在瀏覽器中次・免註冊