css grid現在已經被w3c納入到css3的乙個布局模組當中，被稱為css grid layout module。而我們較為熟悉的還是將其想像成網格或者柵格，也就是早期的960gs。不管是網格還是柵格或者現在的css grid layout module，我想掌握這些技術對於我們將來在web專案中實現布局只有好處沒有壞處。那麼從今天開始我將和大家一起**css中的網格布局。
在我們的web內容中，可以將其分割成很多個內容塊，而這些內容塊都佔據自己的區域(regions)，可以將這些區域想像成是乙個虛擬的網格。到目前為止，在乙個模板中使用不同的結構標籤，使用多個浮動和手動計算實現乙個布局。這對於web前端人員來說，這是一件痛苦之事。而網格布局將讓你擺脫這樣的困局，讓你的布局方法變得非常簡單與清晰。
網格布局給了我們一種方法——建立的結構與使用**(table)布局並沒有什麼不同。然而，他是在css中實現而不是在html中實現，同時還可以依賴於**查詢根據不同的上下文得新定義布局。這對於喜歡響應式設計的同學來說是乙個絕對利好的訊息。因為你不在需要再擔心你的html結構而影響你的布局。
網格布局還可以讓我們擺脫現在布局中存在的文件流限制，換句話說，你的結構不需要根據設計稿從上往上布置了。這也意味著您可以自由地更改頁面元素位置。這最適合你在不同的斷點位置實現你最需要的布局，而不再需要為響應你的設計而擔心html結構的問題。
css grid layout是css為布局新增的乙個模組。網格布局特性主要是針對於web應用程式的開發者。可以用這個模組實現許多不同的布局。網路布局可以將應用程式分割成不同的空間，或者定義他們的大小、位置以及層級。
就像**一樣，網格布局可以讓web設計師根據元素按列或行對齊排列，但他和**不同，網格布局沒有內容結構，從而使各種布局不可能與**一樣。例如，乙個網格布局中的子元素都可以定位自己的位置，這樣他們可以重疊和類似元素定位。
此外，沒有內容結構的網格布局有助於使用流體、調整順序等技術管理或更改布局。通過結合css的**查詢屬性，可以控制網格布局容器和他們的子元素，使用頁面的布局根據不同的裝置和可用空間調整元素的顯示風格與定位，而不需要去改變文件結構的本質內容。
眾觀下來，僅在ie10+上支援，而且也僅支援部分屬性。或許很多同學看到這樣的相容性，又會止步，或者呵呵兩聲閃人了。不過我們學習是無防，在各瀏覽器中通過設定可以做測試效果，在下一次中將會向大家介紹如何在瀏覽器中開啟此功能。
在www-list郵件中常常會看到一種pk的現像：談到網格就會扯到flexbox。假設瀏覽器都支援這兩個模組，你將選擇grid還是flexbox來給頁面布局。其實當你了解兩者之後你會很輕鬆的做出選擇。flexbox是一維布局，他只能在一條直線上放置你的內容區塊；而grid是乙個二維布局。前面也簡單說到，你可以根據你的設計需求，將內容區塊放置到任何你想要放的地方。那麼不用多說，你應該知道哪一種更適合你的布局。
想要玩轉css grid layout，就需要先了解網格給我們的一些新術語以及一些css屬性和值。在這一節中，將簡單的向大家解釋網格布局中的一些概念與術語。
網格線組成了網格，他是網格的水平和垂直的分界線。乙個網格線存在行或列的兩側。我們可以引用它的數目或者定義的網格線名稱。
上圖突出顯示的紅線就是第二列的網格線（line2）。
網格軌道是就是相鄰兩條網格線之間的空間，就好比**中行或列。所在在網格中其分為grid column和grid row。每個網格軌道可以設定乙個大小，用來控制寬度或高度。
圖中突出顯示的就是行線line2和line3之間組成的網格軌道。
網格單元格是指四條網格線之間的空間。所以它是最小的單位，就像**中的單元格。
圖中突出顯示的單元格是由行線line2、line3和列表line2、line3組成的。
網格區域是由任意四條網格線組成的空間，所以他可能包含乙個或多個單元格。相當於**中的合併單元格之後的區域。
圖中突出顯示的網格區域是行線line1、line3和列線line2、line4之間的區域，其主要包括了四個網格單元格。
通過使用display屬性給元素顯式設定了屬性值grid或inline-grid，此時這個元素將自動變成網格容器。這個類似於flexbox一樣，將元素設定設定為display:flex，元素將自動變成彈性盒模型。
由於網格容器不是塊容器，所以有部分屬性在網格布局中將會失效：
網格單元格順序和flexbox模組一樣，通過order屬性來對網格單父元格進行順序重排。
via w3cplus
CSS Grid 網格 布局
grid template columns grid template rows grid template areas grid template grid column gap grid row gap grid gap justify items align items justify con...
CSS Grid 網格布局
css grid是乙個強大的 web 二維布局工具，能夠以行和列來進行布局 通過設定display的屬性為grid或inline grid來建立網格容器 display grid 預設行排列，寬度為容器的寬度 container複製 圖1 1.png display inline grid cont...
CSS Grid 網格布局
概念 grid布局又稱css網格布局，又名 網格 是乙個二維的基於網格的布局系統，其目的只在於完全改變我們設計基於網格的使用者介面的方式 和grid template columns一起，單位統一 a.fr單位 b.repeat 方法 注 網格中提供了乙個新的單位 fr 比例單位 寫法 例子 12 ...