這篇文章主要講解了“CSS網(wǎng)格布局是什么”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS網(wǎng)格布局是什么”吧！

目前成都創(chuàng)新互聯(lián)已為成百上千的企業(yè)提供了網(wǎng)站建設、域名、網(wǎng)絡空間、網(wǎng)站改版維護、企業(yè)網(wǎng)站設計、烏魯木齊網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

為什么我們需要網(wǎng)格布局？

在我們的Web內(nèi)容中，可以將其分割成很多個內(nèi)容塊，而這些內(nèi)容塊都占據(jù)自己的區(qū)域(regions)，可以將這些區(qū)域想像成是一個虛擬的網(wǎng)格。到目前為止，在一個模板中使用不同的結構標簽，使用多個浮動和手動計算實現(xiàn)一個布局。這對于Web前端人員來說，這是一件痛苦之事。而網(wǎng)格布局將讓你擺脫這樣的困局，讓你的布局方法變得非常簡單與清晰。

網(wǎng)格布局給了我們一種方法——創(chuàng)建的結構與使用表格(table)布局并沒有什么不同。然而，他是在CSS中實現(xiàn)而不是在HTML中實現(xiàn)，同時還可以依賴于媒體查詢根據(jù)不同的上下文得新定義布局。這對于喜歡響應式設計的同學來說是一個絕對利好的消息。因為你不在需要再擔心你的HTML結構而影響你的布局。

網(wǎng)格布局還可以讓我們擺脫現(xiàn)在布局中存在的文檔流限制，換句話說，你的結構不需要根據(jù)設計稿從上往上布置了。這也意味著您可以自由地更改頁面元素位置。這最適合你在不同的斷點位置實現(xiàn)你最需要的布局，而不再需要為響應你的設計而擔心HTML結構的問題。

什么是CSS Grid　Layout?

CSS Grid Layout是CSS為布局新增的一個模塊。網(wǎng)格布局特性主要是針對于Web應用程序的開發(fā)者?？梢杂眠@個模塊實現(xiàn)許多不同的布局。網(wǎng)絡布局可以將應用程序分割成不同的空間，或者定義他們的大小、位置以及層級。

就像表格一樣，網(wǎng)格布局可以讓Web設計師根據(jù)元素按列或行對齊排列，但他和表格不同，網(wǎng)格布局沒有內(nèi)容結構，從而使各種布局不可能與表格一樣。例如，一個網(wǎng)格布局中的子元素都可以定位自己的位置，這樣他們可以重疊和類似元素定位。

此外，沒有內(nèi)容結構的網(wǎng)格布局有助于使用流體、調(diào)整順序等技術管理或更改布局。通過結合CSS的媒體查詢屬性，可以控制網(wǎng)格布局容器和他們的子元素，使用頁面的布局根據(jù)不同的設備和可用空間調(diào)整元素的顯示風格與定位，而不需要去改變文檔結構的本質內(nèi)容。

瀏覽器兼容性

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

Grid　vs Flexbox

在www-list郵件中常常會看到一種Pk的現(xiàn)像：談到網(wǎng)格就會扯到Flexbox。假設瀏覽器都支持這兩個模塊，你將選擇grid還是flexbox來給頁面布局。其實當你了解兩者之后你會很輕松的做出選擇。flexbox是一維布局，他只能在一條直線上放置你的內(nèi)容區(qū)塊；而grid是一個二維布局。前面也簡單說到，你可以根據(jù)你的設計需求，將內(nèi)容區(qū)塊放置到任何你想要放的地方。那么不用多說，你應該知道哪一種更適合你的布局。

網(wǎng)格術語

想要玩轉CSS Grid Layout，就需要先了解網(wǎng)格給我們的一些新術語以及一些CSS屬性和值。在這一節(jié)中，將簡單的向大家解釋網(wǎng)格布局中的一些概念與術語。

網(wǎng)格線(Grid Lines)

網(wǎng)格線組成了網(wǎng)格，他是網(wǎng)格的水平和垂直的分界線。一個網(wǎng)格線存在行或列的兩側。我們可以引用它的數(shù)目或者定義的網(wǎng)格線名稱。

網(wǎng)格軌道(Grid Track)

網(wǎng)格軌道是就是相鄰兩條網(wǎng)格線之間的空間，就好比表格中行或列。所在在網(wǎng)格中其分為grid column和grid row。每個網(wǎng)格軌道可以設置一個大小，用來控制寬度或高度。

網(wǎng)格單元格(Grid Cell)

網(wǎng)格單元格是指四條網(wǎng)格線之間的空間。所以它是最小的單位，就像表格中的單元格。

網(wǎng)格區(qū)域(Grid Area)

網(wǎng)格區(qū)域是由任意四條網(wǎng)格線組成的空間，所以他可能包含一個或多個單元格。相當于表格中的合并單元格之后的區(qū)域。

網(wǎng)格容器(Grid Containers)

通過使用display屬性給元素顯式設置了屬性值grid或inline-grid，此時這個元素將自動變成網(wǎng)格容器。這個類似于flexbox一樣，將元素設置設置為display:flex，元素將自動變成彈性盒模型。

由于網(wǎng)格容器不是塊容器，所以有部分屬性在網(wǎng)格布局中將會失效：

多列布局模塊中的所有column-*屬性運用在網(wǎng)格容器上將失效float和clear使用在網(wǎng)格項目（網(wǎng)格單元格Grid Cell）上將失效vertical-align使用在網(wǎng)格單元格上將失效::first-line和::first-letter這樣的偽元素不能應用在網(wǎng)格容器上網(wǎng)格單元格順序(order)

網(wǎng)格單元格順序和Flexbox模塊一樣，通過order屬性來對網(wǎng)格單父元格進行順序重排。

感謝各位的閱讀，以上就是“CSS網(wǎng)格布局是什么”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對CSS網(wǎng)格布局是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關知識點的文章，歡迎關注！