資訊專欄INFORMATION COLUMN
摘要：簡介網格布局又稱網格，是一種二維網格布局系統。在處理網頁布局方面一直做的不是很好。網格容器中的所有子元素就會自動變成網格項目網格線組成網格線的分界線。
簡介
CSS網格布局（又稱“網格”），是一種二維網格布局系統。CSS在處理網頁布局方面一直做的不是很好。一開始我們用的是table（表格）布局，然后用float(浮動)，position（定位）和inline-block（行內塊）布局，但是這些方法本質上是hack，遺漏了很多功能，例如垂直居中。后來出了flexbox盒布局，解決了很多布局問題，但是它僅僅是一維布局，而不是復雜的二維布局，實際上它們（flexbox與grid）能很好的配合使用。
瀏覽器支持情況在我們開始正式學習Grid布局之前，先看一下can i use上grid布局在各個瀏覽器下的支持情況是很有用的，
基本概念要想學好Grid布局的用法，基本概念的介紹是少不了的，雖然看起來比較枯燥。
網格容器(Grid Container)通過display屬性設置屬性值為grid或inline-grid可以創建一個網格容器。網格容器中的所有子元素就會自動變成網格項目（Grid item）
網格線(Grid Line)組成網格線的分界線。它們可以是列網格線（column grid lines），也可以是行網格線（row grid lines）并且居于行或列的任意一側
網格軌道(Grid Track)兩個相鄰的網格線之間為網格軌道。你可以認為它們是網格的列或行
網格單元(Grid Cell)兩個相鄰的列網格線和兩個相鄰的行網格線組成的是網格單元，它是最小的網格單元
網格區(Grid Area)網格區是由任意數量網格單元組成
基本屬性及作用 一個簡單例子要介紹Grid布局屬性，讓我們先從一個簡單例子開始：
如上圖所示，如果我們要實現一個3x3的正方形矩陣，用Grid布局要怎么實現？
.container {
display: grid;
width: 200px;
height: 200px;
grid-template-rows: repeat(3, 50px);
grid-template-columns: repeat(3, 50px);
grid-row-gap: 10px;
grid-column-gap:10px;
}
.container div {
background-color: #ccc;
border: 1px solid #333;
}
如上面代碼所示，3x3的矩陣布局，用Grid布局去寫，非常簡單方便，相對于使用其他布局來說，Grid布局的優點就顯現出來了，那么，接下來就讓我們看看Grid局部中那些常用屬性：
grid-template-rows：指定的每個值可以創建每行的高度。行高的尺寸可以是任何非負值，長度可以是px、%、em等長度單位的值
grid-template-columns：指定的每個值來創建每列的列寬
repeat函數：使用repeat()可以創建重復的網格軌道。這個適用于創建相等尺寸的網格項目和多個網格項目，repeat()接受兩個參數：第一個參數定義網格軌道應該重復的次數，第二個參數定義每個軌道的尺寸
grid-column-gap和grid-row-gap屬性用來創建列與列，行與行之間的間距，間距(Gap)可以設置任何非負值，長度值可以是px、%、em等單位值。
網格線號碼定位依舊是上面html代碼，一個3x3的矩陣，不同的是這次我們通過網線號碼來定位某一個特定方塊。
.container {
display: grid;
width: 200px;
height: 200px;
grid-template-rows: repeat(3, 50px);
grid-template-columns: repeat(3, 50px);
}
.container div {
background-color: #ccc;
border: 1px solid #333;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
/* grid-area: 2/2/3/3; */
}
通過上面的代碼我們可以實現如下效果：
我們定位矩陣正中間的小方塊顯示出來，其余的就不顯示了，下面我們網格線號碼定位的那些屬性：
每條線是從網格軌道開始，網格的網格線從1開始，每條網格線逐步增加1
grid-row-start：表示開始的行網格線序號
grid-row-end：表示結束的行網格線序號
grid-column-start：表示開始的列網格線序號
grid-row-end：表示結束的列網格線序號
如果一個網格項目跨度只有一行或一列，那么grid-row-end和grid-column-end不是必需的
grid-area：網格區域，也是用來定位，如果只提供一個值，它指定了grid-row-start和grid-column-start的值。如果提供兩個值，第一個值是grid-row-start、grid-column-start的值，第二個值是grid-row-end、grid-column-end的值，兩者之間必須要用/隔開。如果指定四個值，第一個值對應grid-row-start，第二個值對應grid-column-start，第三個值對應grid-row-end和第四個值對應grid-column-end
網格區域命名定位網格項目通過上面的例子，我們知道了如何用網格線去定位網格項目，接下來我們將學習如何通過網格區域的命名來定位網格項目，老樣子，依舊從一個例子開始：
.container {
display: grid;
width: 400px;
height: 400px;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
grid-template-areas: "header header2 header3" "body body2 body3" "footer footer2 footer3";
}
.container div {
background-color: #ccc;
border: 1px solid #333;
}
.container .first {
grid-row-start: header2;
grid-row-end: body2;
grid-column-start: header;
grid-column-end: header2;
}
如上述例子看到的，本來是一個3x3的矩陣，但是通過區域命名的方式，將第一個div設置了跨兩行兩列，接下來讓我們一起了解一下網格區域命名定位網格項目的相關屬性：
像網格線名稱一樣，網格區域的名稱也可以使用grid-template-areas屬性來命名。引用網格區域名稱也可以設置網格項目位置
設置網格區域的名稱應該放置在單引號或雙引號內，每個名稱由一個空格符分開。網格區域的名稱，每組（單引號或雙引號內的網格區域名稱）定義了網格的一行，每個網格區域名稱定義網格的一列
grid-row-start和grid-row-end通過區域命名分別設置了行開始的位置和結束，grid-column-start和grid-column-end通過區域命名分別設置了列開始的位置和結束位置
總結這篇文章簡單的介紹了一些Grid布局的屬性和用法，但沒有涉及所有，Grid布局還有很多屬性和用法需要自己去探索，通過不同屬性的排列組合，可以發掘不同的玩法，這不正是布局的魅力嗎？
如果大家想要更加全面的了解Grid布局，可以去Mozilla Grid板塊去探索發現Grid布局的魅力。
這篇文章如果有錯誤或不嚴謹的地方，歡迎批評指正，如果喜歡，歡迎點贊收藏
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114107.html
摘要：瀏覽器兼容性網格布局從開始收到支持，微軟在會更新對網格布局的支持。微軟的瀏覽器和有一種比較舊的實現，所以有不少限制，我們會簡單介紹新的實現方式和老的實現方式之間的區別，這樣你能知道如何規避他們。 原文地址：Getting to know CSS Grid Layout 原文作者：Chris Wright 譯者：華翔 校對者：珂珂、干干 翻譯 | CSS網格（CSS Grid）布局入...
摘要：接下來我們用設置父類元素在這我放一下完整的和代碼則顯示結果如下現在你可能看到似乎沒什么變化。只需要這樣寫確保在你能用電腦在新窗口打開下面這個鏈接，來試試改變瀏覽器窗口大小，看看響應式效果。黃色表示部分支持。 showImg(https://segmentfault.com/img/remote/1460000010000550); 前言 三月中旬的時候，有一個對于 CSS 開發者來說很...
摘要：接下來我們用設置父類元素在這我放一下完整的和代碼則顯示結果如下現在你可能看到似乎沒什么變化。只需要這樣寫確保在你能用電腦在新窗口打開下面這個鏈接，來試試改變瀏覽器窗口大小，看看響應式效果。黃色表示部分支持。 showImg(https://segmentfault.com/img/remote/1460000010000550); 前言 三月中旬的時候，有一個對于 CSS 開發者來說很...
摘要：相信大家都比較熟悉布局了，最近有空研究了波布局，感覺雖然兼容性還不是太高，應用不是太普遍，但是功能非常強大。未來應該是為主流，是二維布局，很靈活，適合整體構架，而是一維布局，適合處理局部細節。介紹介紹網格布局是中最強大的布局系統。 相信大家都比較熟悉flex布局了，最近有空研究了波grid布局，感覺雖然兼容性還不是太高，應用不是太普遍，但是功能非常強大。未來應該是grid+flex為主流，g...
閱讀 2262·2021-09-28 09:36
閱讀 1995·2021-09-22 15:14
閱讀 3622·2019-08-30 12:47
閱讀 3034·2019-08-30 12:44
閱讀 1226·2019-08-29 17:06
閱讀 535·2019-08-29 14:12
閱讀 973·2019-08-29 14:01
閱讀 2580·2019-08-29 12:17
