在我們的網頁內容中，可以分成很多內容塊，這些內容塊都占據了各自的區域，可以想象成壹個虛擬的網格。到目前為止，在壹個模板中使用不同的結構標簽，通過多個浮點和手工計算來實現壹個布局。這對於Web前端人員來說是壹件痛苦的事情。網格布局會幫助妳擺脫這種困境，讓妳的布局方法非常簡單明了。
網格布局給了我們壹種方法——創建壹個結構與使用壹個表格布局沒有什麽不同。但是，它是用CSS而不是HTML實現的，它還可以依靠媒體查詢來根據不同的上下文定義布局。這對於喜歡響應式設計的學生來說絕對是個好消息。因為妳不再需要擔心妳的HTML結構，影響妳的布局。
網格布局還可以讓我們擺脫當前布局中存在的文檔流動限制，換句話說，妳的結構不需要按照設計稿從上到下排列。這也意味著您可以自由更改頁面元素的位置。這樣最適合妳在不同斷點位置實現妳最需要的布局，而不用擔心HTML結構響應妳的設計。
什麽是CSS網格布局？
CSS網格布局是CSS為布局增加的新模塊。網格布局特性主要針對Web應用程序開發人員。這個模塊可以實現許多不同的布局。網絡布局可以將應用程序劃分到不同的空間，或者定義它們的大小、位置和層次結構。
就像表格壹樣，網格布局允許Web設計人員根據元素對齊列或行，但與表格不同，網格布局沒有內容結構，這使得各種布局不可能與表格相同。例如，網格布局中的子元素可以自己定位，以便它們可以重疊和定位相似的元素。
此外，沒有內容結構的網格布局有助於使用流體和順序調整等技術來管理或更改布局。通過結合CSS的媒體查詢屬性，我們可以控制網格布局容器及其子元素，並根據不同的設備和可用空間，使用頁面的布局來調整元素的顯示樣式和定位，而不改變文檔結構的本質內容。
瀏覽器兼容性
壹般來說，只在IE10+上支持，並且只支持部分屬性。也許很多同學看到這種兼容性會停下來，或者會帶著兩種聲音離開。但是，我們的研究是不設防的，在各個瀏覽器中設置就可以測試效果。下壹次，我們將介紹如何在瀏覽器中打開該功能。
網格vs？Flexbox
在www-list的郵件中，我們經常會看到壹種Pk現象:說到網格，就會說到Flexbox。假設兩個瀏覽器都支持這兩個模塊，妳會選擇grid還是flexbox來布局頁面？事實上，當妳兩者都了解的時候，妳會很容易做出選擇。Flexbox是壹維布局，它只能把妳的內容塊放在壹條直線上；並且網格是二維布局。如前所述，您可以根據自己的設計需求將內容塊放在任何地方。不用說，妳應該知道哪個更適合妳的布局。
網格術語
如果妳想玩CSS網格布局，妳需要了解壹些新的術語和網格給我們的壹些CSS屬性和值。在本節中，我們將簡要解釋網格布局中的壹些概念和術語。
網格線(網格線)
網格線組成網格，是網格的水平和垂直分割線。行或列的兩側都有網格線。我們可以參考它的編號或者定義的網格線名稱。
上圖中高亮顯示的紅線是第二列中的網格線(線2)。
網格軌道
網格軌跡是兩條相鄰網格線之間的空間，就像表格中的行或列壹樣。在網格中，分為網格列和網格行。每個網格軌跡都可以設置壹個大小來控制寬度或高度。
圖中突出顯示的是由line2和line3組成的網格軌跡。
網格單元(網格單元)
網格單元是指四條網格線之間的空間。所以它是最小的單位，就像表格中的單元格壹樣。
圖中突出顯示的單元格由line2和line3以及list line2和line3組成。
網格區域(網格區域)
網格區域是由任意四條網格線組成的空間，因此它可能包含壹個或多個單元。相當於表格中合並單元格後的區域。
圖中高亮顯示的網格區域是行線line1和line3與列線line2和line4之間的區域，主要包括四個網格單元。
網格容器(網格容器)
通過使用display屬性為元素顯式設置屬性值grid或inline-grid，該元素將自動成為壹個網格容器。這與flexbox類似。將元素設置設置為display:flex，元素會自動變成彈性盒模型。
因為網格容器不是塊容器，所以網格布局中的某些屬性將無效:
當應用於網格容器時，多列布局模塊中的所有column-*屬性都將無效。
在網格項目(網格單元)中使用float和clear將無效。
在網格單元格中使用時，垂直對齊將無效。
像::first-line和::first-letter這樣的偽元素不能應用於網格容器。
網格單元順序(順序)
網格單元的順序與Flexbox模塊相同，網格的單個父單元通過order屬性按順序重新排列。