你絕對不能錯過的 CSS 網格佈局 知識詳解！

這篇文章跟大家分享一些關於CSS 網格佈局的知識點，帶大家詳細了解 CSS 網格佈局，希望對大家有幫助！

時至今日，可用於現代 Web 佈局的特性非常的多，可能大家最為熟知的還是 Flexbox，都覺得 Flexbox 佈局可以一把梭。雖然說 Flexbox 佈局已非常強大了，但他始終還是一維佈局，對於一些二維佈局的場景，他還是有很大的極限性。這也從側面說明現代Web佈局中或未來的佈局方案中還是離不開 CSS Grid，畢竟到目前為止，他是唯一一個支援二維佈局的技術。在 2021 年我花了幾個月的時間，涉及到 CSS Grid 的都理了個遍，透過二十多篇文章來闡述 CSS Grid。可以說，這個系列算是全網較為系統介紹 CSS Grid 的了。如果我還未接觸過，或對 CSS Grid 有一定的恐懼，那麼這個系列值得你花時間閱讀。

CSS 網格中重要術語

#任何功能模組都有自己的專業術語，CSS Grid 也不例外，只不過CSS Grid 的技術術語涉及範圍更多。在這篇文章中，詳細闡述了CSS Grid 中的相關術語，例如網格軸、網格容器、網格項目、網格線、網格單元格、網格軌道、網格區域、明確網格、隱式網格、網格間距（網槽）、子網格和巢狀網格等。

網格屬性與尺寸

#對CSS Grid 佈局相關技術術語有了一定了解之後，就可以開始真正的了解可用於CSS Grid 中的屬性了。在這一節中，主要和大家一起探討可用於網格容器的屬性，以及設定網格容器、網格項目的尺寸。為此我們就可以使用grid-template-columns、grid-template-rows和grid-template-areas等屬性定義一個明確網格。

網格軌道尺寸的設定

#在CSS Grid 中可以明確使用grid-template-columns 和grid-template -rows 可以明確定義網格軌道。不過在這一節中，我們主要和大家探討可運用於網格軌道尺寸設定的單位，尤其是深度探討了 CSS Grid 中自己獨有的單位 fr。

使用內在尺寸定義網格軌道尺寸

#在grid-template-columns 和grid-template-rows 除了可以使用長度單位（）、百分比單位（） 以及彈性因子單位（fr）設定網格軌道尺寸之外，還可以使用一些關鍵字（例如，none、auto、min-content、max -content、fit-content和fit-content()）來設定網格軌道尺寸。其中min-content、max-content、fit-content 也被稱為使用內在尺寸來設定網格軌道尺寸。

網格中的可用函數

#grid-template-columns 和grid-template-rows 中除了使用固定長度值、動態值和一些關鍵字來設定網格軌道的大小（即，使用外在尺寸和內在尺寸來設定網格軌道尺寸）。我們也可以在CSS Grid 中使用一些函數，例如minmax(min, max)、repeat() 以及CSS 的比較函數（例如min()、max() 和clamp()等函數）來設定網格軌道尺寸，甚至這些函數也可以相互嵌套。

明確網格和隱式網格

#使用grid-template-columns、grid-template-rows 和grid -template-areas 可以明確定義一個明確網格。除此之外，還可以使用 grid-auto-columns、grid-auto-rows 和 grid-auto-flow 來定義一個隱式網格。

網格專案的自動放置

在CSS Grid 佈局中，在網格專案上使用grid-row、grid-column 和grid-area 等屬性可以清楚地將網格項目放置在網格中的指定位置。除此之外，CSS Grid 佈局規格還包含了另外一組規則，用來約定未被明確指定位置的網格項目該如何放置。即使用 grid-auto-flow 來設定網格自動放置。

網格佈局中的網格線

#在CSS 網格系統中，網格線是一個非常重要的概念。預設情況之下，只要定義了一個網格系統，就會預設建立以數字為索引號的網格線名稱（行網格線名稱和列網格線名稱）。除此之外，還可以在 grid-template-columns 和 grid-template-rows 中明確的在中括號[]中給網格線指定名稱。前面提到過，CSS 網格系統中有顯​​式網格和隱式網格之分，同樣的，網格線也有顯式網格線和隱式網格線之分，位於顯式網格上的網格線稱為顯式網格線，位於隱式網格上的網格線稱為隱式網格線。而且在網格系統中，明確放置網格專案時離不開網格線，換句話說，網格線命名的好不好直接會影響我們網格專案放置。在這篇文章中將主要和大家探討網格線怎麼命名？有興趣的請繼續往下閱讀。

網格線在網格佈局系統中是很重要的。前面的內容中雖然沒詳細的闡述網格佈局系統中網格線的相關的知識，但不難發現，網格容器中的grid-template-columns、grid-template-rows、grid-template-areas、 grid-auto-columns、grid-auto-rows、grid-auto-flow等屬性都會建立網格線，並且網格項目上的grid-column、grid-row 和grid-area 可以透過網格線來放置網格項目，而且在建立佈局系統時還會帶來更多的可能性。在這一節中，我們將深入探討在 CSS 網格佈局中命名網格的各種方法，以及由此產生的一些有趣的可能性。

在放置網格項目

CSS Grid 中除了可以自動放置網格項目（一般使用grid-auto-rows、 grid-auto-columns和grid-auto-flow）之外還可以在網格項目是明確使用grid-row、grid-column 和grid-area 設定網格線名稱，來明確的放置網格項目。

網格項目自動放置演算法

#在CSS 網格佈局中，我們可以有很多種方法將網格項目明確的放置到指定的位置。例如：

• 使用grid-row-start、grid-row-end、grid-column-start 和grid-column-end 指定網格線名稱，放置網格項目
• #使用grid-row-start、grid-row-end、grid-column-start 和grid-column-end 的簡寫屬性grid-row 和grid-column 指定網格線名稱，放置網格項目
• 使用grid-area 指定網格名稱或指定grid-template-areas定義的網格區域名稱，放置網格項目
• 在grid-row-start、grid-row-end、grid-column- start、grid-column-end 或grid-row、grid-column 指定網格線名稱，並且使用span 來指定合併的網格單元。他們的結合來放置網格項目
• 在grid-row-start、grid-row-end、grid-column-start、grid-column-end（以及其簡寫屬性grid-row、grid-column ）或grid-area中指定grid-template-rows、grid-template-columns 和grid-template-areas 定義的網格線名稱，放置網格項目
• 使用已命名的網格線名稱和span 關鍵字，放置網格項目
• 在grid-area指定grid-template-areas或grid-template-rows和grid-template-columns創建的網格區域名稱，放置網格項目

不過，在網格佈局系統中，網格專案的放置是有自己一套成熟的演算法。在這個章節中，我們分為五個步驟和大家一起聊聊 CSS Grid 網格專案放置（自動放置和明確放置）的演算法。

網格專案的重疊和z軸的層級

#網格專案可以使用grid-row、grid-column 和grid-area等屬性根據網格線名稱明確指定網格項目位置。這樣就可以讓網格項目互相重疊。換句話說，在CSS Grid 中，可以使用下面這幾種方式讓網格項目相互重疊：

• 使用網格線索引號
• 使用命名的網格線
• 使用命名的網格區域
• 合併網格單元格（即，跨越網格項目）

更為有趣的是，CSS 網格項目不需要明確設定position為非static的值就會觸發z-index生效，也就是說，在網格項目重疊時，可以直接在網格項目上明確設定z-index來控制網格項目在z軸的層級。

網格佈局中的對齊方式和間距

#如果你熟悉Flexbox 佈局中的對齊方式的話，那麼CSS Grid中的對齊方式就很容易掌握。因為它和Flexbox是非常相似的，都是使用 CSS Box Alignment Module Level 3 規範中的特性。在這個章節中，詳細介紹了網格佈局中網格項目和網格軌道的對齊方式，除此之外，還介紹對齊和margin的關係（如何使用margin來設定網格項目的對齊方式）。

另外，在文章的結尾，也介紹了gap屬性，也就是如何使用gap來設定網格軌道之間的間距（俗稱網槽的大小）。

網格專案的寬高比

這一章中主要和大家一起探討了網格專案的寬高比的設置，即CSS 的aspect-ratio 屬性在網格中的運用。另外，也介紹了padding-top或padding-bottom以及CSS 自訂屬性和calc()函式如何實作網格專案的寬高比。

網格中的書寫模式

#在這篇文章中主要和大家聊了聊CSS的邏輯屬性 以及CSS 的書寫模式 對網格佈局的影響。比方說，網格項目自動放置和書寫模式的關係、基於網格線放置網格項目和書寫模式的關係以及網格區域與書寫模式的關係等。

巢狀網格vs. 子網格

#一段時間以來，關於subgrid的使用情況、如何實現它的問題有很多討論，甚至還有一些關於是否需要它的辯論。許多討論都是圍繞著另外兩種可以處理許多與subgrid相同問題的方法：巢狀網格 和 display: contents。這篇文章由嵌套網格作為切入口，並深入闡述嵌套網格和subgrid，即我們將了解哪些是相似的，哪些是subgrid與嵌套網格區別？以及闡述在一些非常有效的情況下，子網格是真正需要的，而在另一些情況下，它並不是嚴格需要的，但會帶來一個更簡潔的解決方案。

subgrid vs display: contents

#subgrid 進入CSS Grid 佈局模組的Level 2 規格之前，巢狀網格、subgrid和display: contents 就有深度的討論，最終subgrid 得到更多的支持，也最終成為規範中的一部分。也就是說，巢狀網格 和 display: contents 都可以實現類似 subgrid 的佈局。那這個章節中，和大家來探討 display: contents 和 subgrid 有何差異？

瀑布流佈局

自從多列佈局、Flexbox佈局和Grid佈局得到瀏覽器支援之後，就可以使用這些特性來實現瀑布流的佈局，但這些技術實現的瀑布流佈局都或多或少有一定的缺陷。不過，值得慶幸的是，CSS 網格佈局的第3級（CSS Grid Layout Module Level 3） 將真正的瀑布流佈局納入了 W3C 規範中，稱得上真正的瀑布流佈局。不過可惜的是，支援該規範草案的主流瀏覽器不多，只有Firefox 和 Firefox Nightly。雖然這個功能還不能用於實際生產中，但你的試用以及使用之後的回饋是很有價值的，這有助於確保它滿足你對這種佈局的要求。

網格審查器調式網格佈局

#從前面這些內容，不難發現網格佈局的複雜性，靈活性。我想大家也意識到了，CSS Grid到來之後，Web中設計佈局的方法也改變了。我們可以在紙上繪製佈局草圖，思考佈局設計的全部內容。當你開始敲擊程式碼的時候，你已經知道佈局會是什麼樣子。正因為CSS Grid佈局的複雜性，再加上網格容器上定義的網格是不可見的。為此我們不得不考慮，如何更輕易的使用網格，或是碰到網格佈局相關的 Bug，又該如何來調試。熟悉 Web 開發的同學都知道，在偵錯佈局或CSS相關的問題時，喜歡在元素上新增邊框。在網格佈局中，雖然可以使用類似的方法在網格容器和網格項目中添加邊框，幫助我們快速的定位；但是我們無法為網格線添加邊框。不過慶幸的是，目前主流的瀏覽器，例如 Chrome、Firefox、Safari 和 Microsoft Edge 瀏覽器的開發者工具（DevTools）都提供了網格佈局審查器。有了這些工具之後，可以快速的幫助我們使用網格，調試使用網格碰到的問題。

網格佈局案例與特徵

#CSS Grid 模組的出現以及瀏覽器對其支持，為Web 佈局提供了前所未有的可能性。我們可以用更少的元素（更簡潔的 HTML 結構）來建立更複雜的設計。這比我們一直認為非常強大的 Flexbox 要更強很多。但是，當你想到 CSS Grid 時，你通常會想到是我們平常習以為常的方塊佈局，對嗎？ @Andy Barefoot 在他的個人網站和Codepen 上提供了很多有創意的響應式佈局效果，讓你會對Web 佈局有一種煥然一新的感覺，感覺與你的經典Web 設計（規規矩矩方塊佈局），而且他使用了CSS Grid 佈局來做到這一點。

使用網格建立建立重疊佈局

#在CSS Grid 佈局中，我們可以透過網格專案放置的方式，讓不同的元素重疊在一起，並且透過CSS 的z-index 來控制網格項目在z 軸上的層疊順序。也就是說，過去需要使用 CSS 的 position 的絕對定位（absolute）來實現的佈局，現在可以直接使用 CSS Grid 來解決。在這個案例中，我們主要來看如何使用 CSS Grid 實現元素疊加的佈局效果。

使用網格建立Full-Bleed佈局

#

Full-Bleed 是印刷界中的一個概念，被稱為 全出血，即在印刷中，我們有出血量，這是紙張被修剪的地方以外的區域。正因如此，印刷設計師習慣在設計工作中考慮出血量。我們透過設定安全區域來做到這一點。這幾年，這種被稱為「全出血」的概念也運用到 Web 的佈局中。就是在受限寬度的一列中使用全寬元素的佈局，例如在較窄的一列文字中使用一個邊緣到邊緣的圖像。在社群中，也有人把這種佈局效果稱為 Full-Width 佈局，也有人稱為 Edge-To-Edge 佈局。說實話，在Web中實現這種佈局效果，已不是難事，社群中有很多種不同的技術方案，都可以達到這個佈局效果。不過，今天我們以不同的角度來思考這個問題！

使用網格建立交叉佈局

這個案例是介紹CSS Grid 建構的另一個網格佈局，即交叉佈局。透過這個案例來更好的幫助我們更進一步理解 CSS Grid 的相關屬性在實際中（Web 佈局）如何使用。

使用網格建立雜誌報紙類別佈局

#一直以來，在Web 佈局中都是以方方正正的矩形向使用者展示UI 效果，而眾多Web 開發者的意識中也是如此，Web 的佈局是無法打破矩形排列的限制！但 Web 技術的發展速度是驚人的，每天都有新的東西出現在我們的眼前。就在這短短的幾年時間內，用於 Web 佈局的新特特別的多。換句話說，如果今天設計師跟你說：「親，整一個類似雜誌或報紙類的佈局吧」！你會爽快的說 OK! 即，使用現在的新特性可以打破矩形框的限制，讓你在 Web 上實現像雜誌一樣的排版佈局。

（學習影片分享：css影片教學）

以上是你絕對不能錯過的 CSS 網格佈局 知識詳解！的詳細內容。更多資訊請關注PHP中文網其他相關文章！