LocalTools離線瀏覽器工具合集

分類: 開發工具

CSS Grid 產生器

站方自行規劃沒找到想要的工具？

建立 grid-template 版面並複製 CSS

在即時的網格預覽上設定欄數、列數與間距，也可以選擇把欄改成 minmax() 軌道，讓欄位在換行前先自行收縮，再複製完成的容器宣告。這裡的一切都不會離開你的瀏覽器。

輸出
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
}

本頁的所有處理都在瀏覽器中完成，不會上傳任何內容。

這個工具能做什麼

grid-template-columns: repeat(n, 1fr) 會產生等寬的欄，但這些欄永遠不會縮到比內容還窄，在窄螢幕上就會溢出。改用 minmax(min, 1fr) 後，每一欄可以先縮到一個下限，網格才會放棄並開始換行——這正是版面在手機上讀起來順不順的關鍵差異。這個工具用同一組控制項同時產生這兩種寫法，讓差異呈現在真正的網格上，而不只是宣告文字裡。

使用方式

  1. 設定欄數與列數。
  2. 設定格子之間的間距。
  3. 如果希望欄位在窄螢幕上能收縮，就開啟 minmax() 欄寬，然後複製 CSS。

隱私說明

本工具完全在你的瀏覽器中執行。輸入的內容不會被上傳、儲存或分享，關閉分頁就隨之消失。

常見問題

預覽是真正的 CSS Grid 嗎？
是的。編了號的格子是用你正在設定的 grid-template-columns 與 grid-template-rows 排出來的。
minmax() 到底改變了什麼？
沒有它時，repeat(n, 1fr) 的欄會保持等寬，但永遠不會縮到比內容還窄，容器一變窄就會直接溢出。minmax(min, 1fr) 讓每一欄可以先縮到設定的最小值，瀏覽器才會另尋方式容納內容。
會上傳任何內容嗎？
不會。宣告是依你設定的選項組出的文字，預覽網格也是在頁面內本機算繪的。

回到全部工具