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+上支持，而且也僅支持部分屬性?；蛟S很多同學看到這樣的兼容性，又會止步，或者呵呵兩聲閃人了。不過我們學習是無防，在各瀏覽器中通過設置可以做測試效果，在下一次中將會向大家介紹如何在瀏覽器中開啟此功能。