SS Grid接管了Web設計的世界。互聯網上有大量的關于它的教程，博客和文章，有足夠多的知識來源。但是其中大多數都會用很少的實際示例來教你基礎知識。因此，在本文章中，我們將在學習過程中查看示例。

1、什么是網格？

CSS Grid允許我們使用網格內的瀏覽器功能編寫更好的布局。在使用CSS Grid之前，我們要么使用自己的自定義網格系統，要么使用Bootstrap之類的東西。雖然使用其他選項的網格也可以正常工作，但是使用CSS網格可以減輕我們在這些解決方案中面臨的大部分麻煩。CSS Grid使開發簡單和復雜的布局變得輕而易舉。在此文章中，我們將學習一些基本術語，然后繼續介紹一個簡單的布局示例。

2、基本術語

與CSS Grid相關的基本術語如下：（1）Columns；（2）Rows；（3）Cells；（4）Grid Lines；（5）Gutter。

上圖中說明了所有術語。此示例為3x2列網格，表示3列和2行。

3、示例布局

既然基本概念已不復存在，我們將使用這些概念進行如下示例布局：

如你所見，有一個頁眉和頁腳。然后，中心行在右側的第一列側欄中有3列導航欄，中間是主要內容區域（占據了該行的大部分）。以下是此示例的示例HTML。

現在，HTML已經不合適我們了，讓我們深入研究CSS。首先，讓我們給它一些樣式，以便我們的HTML像上面一樣。這些CSS規則不是CSS網格的一部分，因此你可以根據需要省略它們。

如你所見，我正在對包裝容器中的所有項目進行樣式設置。我將其背景色設置為orange和給定，bottom而right margins.display flex只是通過設置justify-content和align-items來使項目居中對齊center。接下來，讓我們進入其中的CSS網格部分。

在上面的代碼中，我們將設置display為grid-。這就是我們將容器轉換為的方式grid。接下來，我們設置列和行。我們將使用grid-template-columns和grid-template-rows屬性來完成此操作。grid-template-columns允許我們使用適當的值設置列數width。grid-template-rows允許我們根據rows自己的需要設置數量height。

在上面的示例中，共有3列，其中第一列采用1 fraction，第二列采用5 fraction，第三列2 fractions。無論我們將其分成多少件，單個小數單位都表示“一件”。如果你在上面查看相同的示例，則使用相同的概念rows。一共有三行，第一行包含，header該行將整個三列都包含在內。第二行獲取導航，內容和一旁的內容，而頁腳轉到第三行和最后一行并占用所有三列。

這意味著第一行和最后一行占據相同的高度，即5 fractions。中排占據了其余的剩余高度。接下來，我們還將創建一個10px的裝訂線。我們可以使用grid-gap屬性在CSS Grid中進行此操作。最后，我們為包裝容器設置一個高度。如果我們在瀏覽器中查看它，將會得到我們想要的結果，如下所示：

現在，通過設置頁眉和頁腳的一些屬性，使其看起來更像我們想要的樣子。我們將告訴頁眉和頁腳占用整個行。我們將使用grid-column-start和grid-column-end屬性來完成此操作，如下所示：

如你所見，頁眉和頁腳都從grid line1 開始，到grid line4 結束。這使它們可以占用整個行。這將產生我們想要的確切輸出，如下所示：

4、完整的代碼-整個代碼如下：

本文就是這樣。你可以在這里關注我以獲取更多文章。如果你喜歡它，請不要忘記在社交媒體上分享它。

css 繪制網格線背景，代碼如下：

.grid {
	/* 網格單個格子大小 */
	background-size: 35px 35px;
	background-image:
	/* 橫線 */
	linear-gradient(0, #e6e6e6 1px, transparent 1px),
	/* 豎線 */
	linear-gradient(90deg, #e6e6e6 1px, transparent 1px);
}

效果如下:

也可以變化一下，將豎線的顏色改為背景同色，制作筆記本橫線

么是網格布局？

先看一個例子：

簡單來說網格布局就是display: grid，將元素定義為一個網格容器，內部的子元素則變成網格元素。

display: grid;  // 定義網格容器
grid-template-columns: 1fr 1fr 1fr;  // 定義等寬的3列
grid-template-rows: 1fr 1fr; // 定義等高的兩行
grid-gap: .5em; // 給每個網格的單元格子間加上間隔

fr是一種新的單位，代表每一行或者列的分數單位（fraction unit）。

重要概念

網格線（grid line）：網格線構成了網格的框架。一條網格線可以水平或垂直，也可以位于一行或一列的任意一側。如果指定了grid-gap，它就位于網格線上。

網格軌道（grid track）：一個網格軌道是兩條相鄰網格線之間的空間。網格有水平軌道和垂直軌道。

網格單元（grid cell）：網格上的單個空間，水平和垂直的網格軌道交叉重疊的部分。

網格區域（grid area）：網格的矩形區域，由一個到多個網格單元組成。

網格線編號

網格軌道定義好后，要將每個網格元素放到特定的位置上。瀏覽器給網格里的每個網格線都賦予了編號。

可以在grid-column和grid-row屬性中間用網格線的編號指定網格元素的位置。如果想要一個網格元素在垂直方向上跨越1號網格線到3號網格線，就需要給元素設置grid-column：1 / 3。

需要注意的是，網格的高度是隨著內容的高度自動計算的，比如上面a、c兩個網格分別占據了兩行，一共有5行，最終每行的高度是a、c內容高度的最大值除以所占的行數（2），如果我們設置a只占一行，那么每一行的高度就會放大接近2倍：

命名網格線

有時候記錄所有網格線的編號實在太麻煩了，為了能簡單點，可以給網格線命名：

grid-template-column: [start] 2fr [center] 1fr [end];

這條聲明定義了兩列的網格，三條垂直的網格線分別叫做start、center、end。之后在grid-colum中可以這樣寫：

grid-column: start / center;

命名網格區域

可以將網格區域命名，然后將元素放到指定的網格中：

需要注意的是，網格的命名一定要準確，并且不能少，不然網格就會錯位！