多年來,當設計需要真正的二維佈局時,我的本能是到達一堆嵌套的柔性容器。一列內的一排卡片在另一排內,每一張卡片都在彎曲,每一張卡片都在與其他卡片爭奪空間。它很有效,因為像素最終落在我想要的地方,但它從來都不是正確的工具,每次我必須更改設計時,我都會支付快捷方式的費用。 CSS 網格就是為此而構建的,當我停止避免它的那一天,我的佈局代碼變得更短,我的標記變得更平坦。
讓我長時間遠離網格的是語法。 grid-template-columns: repeat(3, minmax(0, 1fr)) 這不是一個會讓人感到厭煩的短語,你聲明的曲目和出現的框之間的關係直到你看到它發生了幾十次才變得明顯。 "我知道我想要什麼"和"我知道產生它的屬性"這正是產生器關閉的內容。
的 CSS 網格產生器 讓您設定列數和行數、為每個軸選擇大小、撥入間隙並調整對齊方式,同時即時預覽會在您面前重新播放。產生您所看到內容的確切 CSS 位於下面的可複製框中。它將網格從您必須記住的規格變成您透過點擊建立的佈局。
TL;DR: CSS網格是一種二維佈局模型,同時控制行和列。容器驅動它通過
grid-template-columns,grid-template-rows,gap,這四個屬性證明並對齊。此產生器公開所有這些,顯示即時預覽,並發出乾淨的 CSSrepeat()和fr單位。因為預覽版會呈現與其輸出的相同聲明,因此您看到的正是您貼上的內容。它完全在您的瀏覽器中運行,無需註冊。
CSS 網格產生器解決了什麼問題?
CSS網格的困難不在於它複雜。而是它是抽象的。您描述一個結構("三個相等的列,它們之間有一點空間"),瀏覽器計算幾何形狀。間接是重點,因為它使得網格在沒有單一媒體查詢的情況下做出回應。但間接很難在你的腦海中保持。你不能看 repeat(3, 1fr) 並以您查看渲染的框網格的方式立即感受到結果。
生成器將寫入-儲存-刷新循環折疊為單一互動。您更改列數,三個框變為四個。您切換軌道 1fr 到 auto 並且該列會折斷到其內容的寬度。你拉大間隙,盒子就會呼吸。十分鐘後,分數單位就不再是你翻譯的符號,而是你故意達到的東西。當你完成探索時,你不會留下需要轉錄的註釋,因為工作 CSS 已經在輸出框中為你編寫了。
還有第二個更安靜的好處。透過操縱建立佈局迫使工具僅發出有效的、格式良好的 CSS。你不能產生損壞 grid-template-columns 點擊即可獲得價值,因此輸出始終是您可以放心貼上的一樣。可靠性是我讓一組視覺化 CSS 建構器靠近而不是從頭開始編寫每個規則的原因。
網格容器控制哪些屬性?
CSS 網格與 Flexbox 一樣,在容器及其項目之間劃分責任。容器定義了軌道和整體結構,這就是大多數佈局決策所在的位置,因此也是生成器關注的位置。這是每個容器屬性的作用。
| 財產 | 它控制什麼 | 共同價值觀 |
|---|---|---|
grid-template-columns |
列的數量和大小 | repeat(3, 1fr), 200px 1fr, auto |
grid-template-rows |
行的數量和大小 | repeat(2, auto), 100px, 1fr |
gap |
軌道之間的空間 | 例如,任何長度 16px 或者 20px 10px |
justify-items |
項目沿行軸的位置 | stretch, start, center, end |
align-items |
項目沿柱軸的位置 | stretch, start, center, end |
justify-content |
當網格比其容器窄時,在行軸上追蹤位置 | start, center, space-between |
align-content |
追蹤柱軸上的位置 | start, center, space-between |
製作這根棍子的心理模型是軌道和物品之間的區別。 grid-template-columns 和 grid-template-rows 定義軌道,即網格的空車道。間隙位於這些車道之間。這 justify-items 和 align-items 然後,屬性將每個項目定位在其佔據的單元格內,同時 justify-content 和 align-content 當有空餘空間時,將整套軌道放置在容器內。產生器使這兩個等級在視覺上保持分離,以便您可以感受到在其單元格內移動項目和在頁面內移動整個網格之間的差異。
fr 單位是什麼意思?
的 fr 單位是CSS網格的一部分,為整個模型付費,值得理解而不是複製。一 fr 表示減去任何固定尺寸和間隙後網格容器中可用空間的一小部分。如果你寫 grid-template-columns: 1fr 1fr 1fr,容器'可用寬度分為三個相等的部分。寫 2fr 1fr 1fr 第一列佔一半空間,另外兩列則分割其餘部分。瀏覽器會重新計算每個大小上的這些分數,這就是為什麼基於分數的網格是流動的,沒有任何斷點。
對於大多數佈局來說,這種行為使得網格優於百分比。一組 33.33% 列忽略間隙和溢出,因為百分比加上間隙加起來大於容器。分數單位是在取出間隙後計算的,因此 repeat(3, 1fr) 間隙總是適合的。生成器預設為 1fr 正是出於這個原因,您可以觀看三個相等的列在更改間隙時保持其比例。如果您想要一個包含其內容的列,請將其切換到 auto, min-content,或者 max-content 並立即看到差異。
如何進行三列佈局?
這是人們用網格建造的最常見的東西之一,配方是兩行。將容器設定為 display: grid 並給予 grid-template-columns: repeat(3, 1fr). 這會產生三個相等的列,這些列根據內容需求流入任意數量的行。添加一個 gap 您有一個卡片佈局。
在產生器中,您將列數設為三,保留大小 1fr,預覽版列出了相等單元格的網格。輸出框顯示:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 16px;
}
值得透過點擊而不是打字來建立這一點的原因是,真正的佈局永遠不會那麼乾淨。您會希望側邊欄具有固定的寬度和要彎曲的內容,或者第一行比其他行更高。這些變更中的每一個都是生成器中的一個控制和輸出中的一個編輯值,並且您在將其提交到樣式表之前都會看到效果。如果您仍在針對特定區塊在網格和基於靈活的方法之間做出決定,則 flexbox 產生器 是配套工具,本指南後面的比較解釋了每一項何時獲勝。
我什麼時候應該在 flexbox 上使用網格?
一旦您了解了這兩種模型,這是最重要的問題,誠實的答案是它取決於佈局的維度數量。 Flexbox 是一維的。它沿著單一軸、一行或一列排列項目,如果您提出要求,則將它們包裹起來。網格是二維的。它將行和列控制在一起,因此可以同時按其行和列定位項目。
我使用的實用規則是這樣的。如果我在一行中佈置一組東西,一個導覽列,一排標籤,一個工具列,一堆表單字段,那就是flexbox。如果我正在佈置一個行和列都需要相互對齊的結構,一個帶有標題、側邊欄和內容區域的頁面外殼,或者一個畫廊,其中每張卡都位於乾淨的網格線上,即網格。兩者不是競爭對手;網格單元通常包含一個 Flex 容器,而 Flex 項目通常是一個小網格。這是作為表格的分割。
| 問題 | 柔性盒 | CSS 網格 |
|---|---|---|
| 尺寸 | 一次一個軸 | 行和列在一起 |
| 最好 | 工具列、導航、物品行、包裝標籤 | 頁面佈局、圖庫、儀表板、表格 |
| 尺寸由驅動 | 內容,然後分發 | 您聲明的軌道模板 |
| 對齊 | justify-content, align-items |
同樣的加號 justify-items, align-content |
| 典型用途 | 網格單元內 | 整體頁面或部分框架 |
生成器之所以將其具體化,是因為您可以雙向建立相同的視覺結果,並查看哪個產生更乾淨的規則。對於相等的卡片庫,網格與 repeat() 是兩條線,flex 是一個包裝容器,每個孩子身上都有寬度。對於需要將其物品展開到邊緣的單行,請彎曲 space-between 是較短的路徑。
間隙、證明內容和對齊內容有什麼不同?
這三者常常會感到困惑,因為他們都處理空間,但他們的運作層次不同。這 gap 屬性設定了軌道之間的固定間距,您幾乎在每個網格中都使用這個間距。單一值將行和列等距地間隔開;兩個值分別設定行間隙和列間隙,順序為行然後列。生成器可讓您獨立設定兩個間隙,並且僅在它們不同時發出簡寫,因此輸出在情況允許的情況下保持較短。
justify-content 和 align-content相較之下,只有在網格'時才做任何事情。軌道比容器小,留下備用空間進行分配。如果您的列都是固定的像素寬度並且它們沒有填滿容器, justify-content: center 將使整個軌道塊居中,並且 space-between 會把它們推到邊緣。與 fr 已經填滿寬度的列,這些屬性沒有什麼可分配的,而且似乎什麼都不做,這是常見的混亂來源。當它們處於預設值時,生成器會從輸出中省略它們 start(所以複製規則中的每一行都是具有明顯效果的。只發出有意義的聲明的習慣與我在《憲法》中所依賴的習慣是一樣的 梯度發生器 和 箱形陰影產生器,因為充滿禁止台詞的規則是你一眼就無法相信的規則。
生成器如何保持預覽誠實?
任何視覺化建構器的陷阱都是預覽和匯出的程式碼可能會分崩離析。以一種方式渲染預覽並以另一種方式產生程式碼的工具比無用更糟糕,因為它教你一種不會重現的佈局。此產生器透過從單一聲明清單建立預覽和複製的 CSS 來避免這種情況。決定要發射哪些屬性的相同函數是設定預覽框樣式的函數,因此您看到的正是您貼上的內容。沒有單獨的渲染路徑可能會出現分歧。
這種設計選擇就是輸出使用的原因 repeat() 對於任何具有多個軌道的軸。單一軌道以裸尺寸發射,但兩個或多個軌道塌陷 repeat(n, size),這既是人類會寫的內容,也是隨著計數的增加而保持規則可讀的內容。這是一件小事,但它是你將發送的輸出和你將重寫的輸出之間的差異。
逐步建立響應式卡網
這是我經常使用的工作流程。從列數到三和大小開始 1fr. 現在您有三個相等的流體列。將行大小設為 auto 因此,每一行都會成長以適應其最高的卡片。將間隙提高到舒適的程度,大約二十像素。這是一個完整的、響應靈敏的卡片網格,輸出為四行。
為了使其無需媒體查詢即可自行包裝,真實專案的下一步是交換 repeat(3, 1fr) 對於 repeat(auto-fill, minmax(240px, 1fr)),它告訴瀏覽器盡可能多地容納 240 像素的最小列,並將它們拉伸以填充。生成器為您提供固定計數起點;一次編輯將其變成一個自包裝網格。了解起點是使編輯變得顯而易見的原因,這就是透過建立而不是貼上來學習佈局的整個論點。組裝一組以這種方式工作的工具的更廣泛案例在於 web 開發人員工具包,背後的工作流程習慣就在 開發人員生產力工具 指南。
哪些瀏覽器支援 CSS 網格?
目前每個瀏覽器都支援 CSS 網格,並且已經支援多年。此產生器發出的屬性是標準且無前綴的,因此輸出可在 Chrome、Firefox、Safari 和 Edge 中運行,無需供應商前綴或專案目前實際目標的任何瀏覽器的後備。這 gap 網格容器中的屬性是最後一個廣泛著陸的部件,現在也得到了普遍支持。這意味著您複製的 CSS 已按書面形式做好生產準備,這在網格的早期並不總是如此,這也是該模型最終成為預設選擇而不是漸進增強的原因之一。對於基本規則,W3C 的 CSS 網格佈局模組 1 級規範是主要來源,一旦生成器讓您直觀地遵循它,就值得一讀。
如果您正在除此之外建立一個更廣泛的視覺化工具包,那麼 邊界半徑產生器 和 CSS 箝位產生器 完善集合,並且 編碼工具指南 收集我最能接觸到的人。
常見問題
什麼是 CSS 網格產生器?
CSS 網格產生器是一種視覺化工具,可根據您選擇的設定建立 CSS 網格佈局程式碼。您選擇列、行、軌道大小、間隙和對齊,它會輸出網格模板 CSS 以及結果的即時預覽。
fr 單元在 CSS 網格中意味著什麼?
fr 單位代表網格容器中可用空間的一小部分。網格模板列:重複(3、1fr)建立三列,每列在容器調整大小時佔據相同份額的可用寬度和回流。
CSS Grid 和 flexbox 有什麼不同?
CSS 網格是一種二維模型,可同時控制行和列,非常適合頁面佈局和卡片網格。 Flexbox 是一維的,沿著單一軸放置項目,非常適合工具列和行。它們是互補的並且經常一起使用。
如何製作響應式網格?
使用 fr 單元,以便軌道共享可用寬度,並將 repeat () 與 minmax () 以及自動填充或自動擬合組合起來,以自動纏繞自己的網格。此產生器發出重複(),並以 fr 軌道作為起點,您可以擴展。
CSS 網格中的間隙屬性是什麼?
間隙設定網格軌道之間的間距。單一值將行和列等距間隔;兩個值分別設定行間隙和列間隙,順序為行間隙,然後是列間隙。
產生的網格 CSS 在生產中使用安全嗎?
是的。每個現代瀏覽器都支援 CSS 網格,並且該工具會發出標準的、無前綴的屬性。所有處理都發生在您的瀏覽器中,因此不會上傳任何內容,並且工具在載入後會離線工作。
CSS 網格產生器在行動裝置上運作嗎?
是的。該工具響應迅速,可在手機、平板電腦和桌面上的任何現代瀏覽器中使用。無論您建置在哪個裝置上,產生的 CSS 都是相同的。
這個 CSS 網格產生器是免費的嗎?
是的。它是完全免費的,沒有註冊、沒有浮水印、沒有使用限制。它產生的網格 CSS 供您在任何專案中使用。
