免費轉換器

CSS Grid 版面生成器

透過即時預覽視覺化生成CSS Grid版面。調整grid-template-columns、列數、間距、justify-items、align-items等屬性 — 免費且在客戶端運行。

即時預覽
1
2
3
4
5
6
欄數 (repeat(3, 1fr))
列數 (repeat(2, 1fr))
欄間距 (12px)
0px16px32px
列間距 (12px)
0px16px32px
justify-items
align-items
CSS輸出
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  column-gap: 12px;
  row-gap: 12px;
  justify-items: stretch;
  align-items: stretch;
}

.item {
  padding: 1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

關於此工具

直接在瀏覽器中使用 Css 網格生成器建立和自訂內容。配置您的首選項、產生輸出並下載或複製結果。一切都在客戶端運行——您的資料保持私密且處理是即時的。

使用方法

  1. 配置設定和選項以滿足您的要求。
  2. 點擊“生成”以建立輸出。
  3. 預覽結果並根據需要進行調整。
  4. 下載輸出檔案或將其複製到剪貼簿。

常見問題

我可以自訂生成的輸出嗎?
是的。該工具提供了各種自訂選項,可根據您的特定需求自訂輸出。在生成之前調整設置,或使用不同的選項重新生成。
產生的內容可以免費使用嗎?
是的。您使用此工具產生的所有內容都可以用於個人、教育或商業目的,沒有任何限製或歸屬要求。
這個需要帳號嗎?
不需要。該工具無需註冊、無需電子郵件、無需註冊即可立即使用。只需打開頁面並開始生成。
我的輸入資料是否保密?
是的。所有處理都發生在您的瀏覽器中。您的輸入資料和產生的輸出永遠不會發送到任何外部伺服器。