CSS 網格是複雜佈局的終極解決方案嗎？

網格佈局：複雜佈局的現代解決方案

您尋求一種跨越非表格中的行和列的解決方案，非網格佈局在先前的線程中已有詳細記錄。然而，隨著最近的瀏覽器更新，情況已經改變了。

CSS 網格：遊戲規則改變者

CSS 網格佈局現已得到所有主要瀏覽器的完全支持，提供了針對複雜佈局的強大而靈活的解決方案。它消除了更改 HTML、添加嵌套容器或設定固定容器高度的需求。

實作網格版面配置

1. 設定包裝元素的顯示屬性到 grid 以啟用網格版面。
2. 使用 grid-template-columns 和定義網格列和行grid-auto-rows。
3. 設定 grid-gap 屬性以指定元素之間的間距。
4. 在元素上使用 grid-row 和 grid-colum 屬性來控制它們在網格中的位置。

網格範例佈局

考慮以下包含CSS 網格的程式碼片段：

#wrapper {
  display: grid;                            
  grid-template-columns: repeat(5, 90px);   
  grid-auto-rows: 50px;                     
  grid-gap: 10px;                           
  width: 516px;
}

.tall {
  grid-row: 1 / 3;                          
  grid-column: 2 / 3;                       
}

.wide {
  grid-row: 2 / 4;                          
  grid-column: 3 / 5;                       
}

.block {
  background-color: red;
}

改進的瀏覽器支援

從今天開始，CSS 網格完全支援：

• Chrome 57
• Firefox 52
• Safari 10 >
Edge 15
• Opera 44

以上是CSS 網格是複雜佈局的終極解決方案嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！