CSS Grid佈局：什麼是網格佈局

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 Grid Layout是CSS爲佈局新增的一個模塊。網格佈局特性主要是針對於Web應用程序的開發者。能夠用這個模塊實現許多不一樣的佈局。網絡佈局能夠將應用程序分割成不一樣的空間，或者定義他們的大小、位置以及層級。

就像表格同樣，網格佈局可讓Web設計師根據元素按列或行對齊排列，但他和表格不一樣，網格佈局沒有內容結構，從而使各類佈局不可能與表格同樣。例如，一個網格佈局中的子元素均可以定位本身的位置，這樣他們能夠重疊和相似元素定位。

此外，沒有內容結構的網格佈局有助於使用流體、調整順序等技術管理或更改佈局。經過結合CSS的媒體查詢屬性，能夠控制網格佈局容器和他們的子元素，使用頁面的佈局根據不一樣的設備和可用空間調整元素的顯示風格與定位，而不須要去改變文檔結構的本質內容。

瀏覽器兼容性

衆觀下來，僅在IE10+上支持，並且也僅支持部分屬性。或許不少同窗看到這樣的兼容性，又會止步，或者呵呵兩聲閃人了。不過咱們學習是無防，在各瀏覽器中經過設置能夠作測試效果，在下一次中將會向你們介紹如何在瀏覽器中開啓此功能。

Grid　vs Flexbox

在www-list郵件中經常會看到一種Pk的現像：談到網格就會扯到Flexbox。假設瀏覽器都支持這兩個模塊，你將選擇grid仍是flexbox來給頁面佈局。其實當你瞭解二者以後你會很輕鬆的作出選擇。flexbox是一維佈局，他只能在一條直線上放置你的內容區塊；而grid是一個二維佈局。前面也簡單說到，你能夠根據你的設計需求，將內容區塊放置到任何你想要放的地方。那麼不用多說，你應該知道哪種更適合你的佈局。

網格術語

想要玩轉CSS Grid Layout，就須要先了解網格給咱們的一些新術語以及一些CSS屬性和值。在這一節中，將簡單的向你們解釋網格佈局中的一些概念與術語。

網格線(Grid Lines)

網格線組成了網格，他是網格的水平和垂直的分界線。一個網格線存在行或列的兩側。咱們能夠引用它的數目或者定義的網格線名稱。

上圖突出顯示的紅線就是第二列的網格線（line2）。

網格軌道(Grid Track)

網格軌道是就是相鄰兩條網格線之間的空間，就比如表格中行或列。所在在網格中其分爲grid column和grid row。每一個網格軌道能夠設置一個大小，用來控制寬度或高度。

圖中突出顯示的就是行線line2和line3之間組成的網格軌道。

網格單元格(Grid Cell)

網格單元格是指四條網格線之間的空間。因此它是最小的單位，就像表格中的單元格。

圖中突出顯示的單元格是由行線line2、line3和列表line2、line3組成的。

網格區域(Grid Area)

網格區域是由任意四條網格線組成的空間，因此他可能包含一個或多個單元格。至關於表格中的合併單元格以後的區域。

圖中突出顯示的網格區域是行線line1、line3和列線line2、line4之間的區域，其主要包括了四個網格單元格。

網格容器(Grid Containers)

經過使用display屬性給元素顯式設置了屬性值grid或inline-grid，此時這個元素將自動變成網格容器。這個相似於flexbox同樣，將元素設置設置爲display:flex，元素將自動變成彈性盒模型。

因爲網格容器不是塊容器，因此有部分屬性在網格佈局中將會失效：

• 多列布局模塊中的全部column-*屬性運用在網格容器上將失效
• float和clear使用在網格項目（網格單元格Grid Cell）上將失效
• vertical-align使用在網格單元格上將失效
• ::first-line和::first-letter這樣的僞元素不能應用在網格容器上

網格單元格順序(order)

網格單元格順序和Flexbox模塊同樣，經過order屬性來對網格單父元格進行順序重排。

總結

在這篇文章中簡單的介紹了CSS Grid Layout，以及爲何要使用他，而且介紹了其一些術語：網格線、網格軌道、網格單元格、網格區域和網格容器等，爲後面如何學習和使用CSS Grid Layout作了一個鋪墊。但願這篇文章對於初學者有所幫助，若是您對此篇文章感興趣，請繼續觀注下一篇相關文章，將會向你們介紹如何在瀏覽器中開啓CSS Grid Layout模塊，讓你的測試用例能在瀏覽器中看到相關效果。

---

via w3cplus