最近在學習css grid布局，為了避免以后忘記了難得查資料，遍寫在博客中方便以后查詢！

1,display屬性

display有三個值，

?

• grid?：生成一個塊級網格
• inline-grid?：生成一個內聯網格
• subgrid?：如果你的網格容器本身是另一個網格的網格項（即嵌套網格），你可以使用這個屬性來表示，它的行/列的大小繼承自它的父級網格容器，而不是自己指定的。　　

我們先創建一個grid的網格容器

在html中寫入代碼

<div class="container"></div>

css中寫入代碼

.container{display: grid;}

這樣我們就創建好了一個網格容器，因為grid容器時隱性容器，在我們沒有向容器里面添加元素時，是看不到效果的，grid容器在我們沒有設置大小時，默認寬度為100%，高度為0.

注意：在 網格容器(Grid Container) 上使用column，float，clear，?vertical-align?不會產生任何效果。

2,grid-template-columns / grid-template-rows

　　用來定義網格的列和行，即設置幾行幾列。

值

• 單位為“px”?
• 單位為“fr”
• auto
• n%
• repeat（）

（1）px

我們在container中添加代碼

.container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 50px 100px;}

這樣我們就創建了一個三行，三列的網格，寬度分別為100px,100px,100px。高度分別為100px,50px,100px。

但是，我們在瀏覽器中是看不到效果的，我們需要向里面添加元素，才能看到效果。

我們在html中添加以下代碼

<div class="container"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div> </div>

我們在css中添加代碼放方便查看效果。

.container div{border: 1px #000 solid;}

我們就能看到效果了，效果圖為

?

?可以看到我們只有一個3×2的網格，但是我們明明設置的3×3的網格啊。這是因為grid時隱性表格，我們只有六個元素，所以只能填滿六個格子，而剩下的沒有填的我們時看不到的，但是它們還是存在的。當我們沒有設置填充的元素的位置時，默認時從上到下，從左到右按行依次填充，即先填充第一行，填充慢了之后在填充第二行，直到元素被用完為止。

（2）fr

接下來我們將單位“px”改為“fr”，

css中container中修改代碼

.container{display: grid;grid-template-columns: 1fr 2fr 1fr;grid-template-rows: 100px 50px 100px;}

效果圖為

因為我們總共有4fr，所以將容器的寬度平均分為了4份，一個fr占一份，兩個占兩份，一次類推，因為我們沒有設置容器的寬度，也沒有用px單位設置網格格子的寬度，所以容器默認寬度為100%。

注意：當fr和px共存時，是將px的大小減去之后，在剩余的大小內在均分。

（3）auto

接下來我們再把auto加進去。

css中container中修改代碼

.container{display: grid;grid-template-columns: 100px 100px auto 100px;grid-template-rows: 100px 50px 100px;}

效果圖為

由圖可知，auto是在其他固定的大小分配之后，剩下的就是它的大小了，如果有兩個或兩個以上的auto，就是每個auto之間平均分配剩下的大小。

（4）n%

至于n%，n時多少就占整個容器的百分之多少。

（5）repeat()

我們修改css中container中的代碼

.container{display: grid;grid-template-columns: repeat(3,100px);grid-template-rows: 100px 50px 100px;}

上面的代碼等價與下面的代碼

.container{display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 50px 100px;}

這些值放在grid-template-rows中也是一樣的，只是列變行而已，這里就不做演示了。

?3,grid-template-areas

指定的 網格區域(Grid Area) 名稱來定義網格模板。重復網格區域的名稱導致內容跨越這些單元格。這個語法本身可視作網格的可視化結構。

值

?

• <grid-area-name>：由網格項的?grid-area?指定的網格區域名稱
• .（點號） ：代表一個空的網格單元
• none：不定義網格區域

?

修改html中的代碼

<div class="container"><div class="item-a">1</div><div class="item-b">2</div><div class="item-c">3</div><div class="item-d">4</div><div class="item-e">5</div><div class="item-f">6</div> </div>

修改css中的代碼

.item-a {grid-area: one;}.item-b {grid-area: two;}.item-c {grid-area: three;}.item-d {grid-area: four;}.item-e {grid-area: five;}.item-f {grid-area: six;}.container {display: grid;grid-template-columns: 100px 100px 100px 100px;grid-template-rows: auto;grid-template-areas: "one one one one""two two . three""four four four four""five five six six";}.container div{border: 1px solid #000;}

效果圖

因為我們不確定有幾行，所以我們設置的是auto，這樣我們就不能設置行高了，子元素的高度是多少它的高度就是多少，但是我們可以設置子元素的高度。就能設置網格的高度了。

所以我們設置子元素高度為100px，對container下的div設置高度

.container div{height: 100px;border: 1px solid #000;}

效果圖為

這樣，我們就設置好了這樣一個網格，第一行區域名稱為“one”，第二行一二列區域名稱為“two”，第二行第四列區域名稱為“three”，第三行區域名稱為“four”，第四行一二列名稱為“five”，第四行三四列名稱為“six”。

4,grid-column-gap / grid-row-gap

　　指定網格線(grid lines)的大小。即設置列/行之間間距的寬度。

我們修改css中container的代碼

.container {display: grid;grid-template-columns: 100px 100px 100px 100px;grid-template-rows: auto;grid-template-areas: "one one one one""two two . three""four four four four""five five six six";grid-column-gap: 10px;grid-row-gap: 10px;}?

效果圖為

下面兩段代碼等價，下面的代碼上上面的簡寫。

grid-column-gap: 10px;grid-row-gap: 10px; grid-gap: 10px;

5,justify-items /?align-items

沿著 行軸線(row axis) 或列軸線（column axis）對齊 網格項(grid items) 內的內容。該值適用于容器內的所有網格項。

值

?

• start：將內容對齊到網格區域(grid area)的左側
• end：將內容對齊到網格區域的右側
• center：將內容對齊到網格區域的中間（水平居中）
• stretch：填滿網格區域寬度（默認值）

修改css中container容器下div的代碼，

.container div{display: grid;height: 100px;border: 1px solid #000;justify-items: center;align-items: center;}

效果圖為

我這里就只嘗試center了。

6,justify-content /?align-content

有時，我們的網格合計大小可能小于其 網格容器(grid container) 大小。 比如我們的所有 網格項(grid items) 都使用像?px?這樣的非靈活單位設置大小，我們又設置了容器的大小。在這種情況下，您可以設置網格容器內的網格的對齊方式。?

值

• start：將網格對齊到 網格容器(grid container) 的頂部
• end：將網格對齊到 網格容器 的底部
• center：將網格對齊到 網格容器 的中間（垂直居中）
• stretch：調整 網格項(grid items) 的高度，允許該網格填充滿整個 網格容器 的高度
• space-around：在每個網格項之間放置一個均勻的空間，上下兩端放置一半的空間
• space-between：在每個網格項之間放置一個均勻的空間，上下兩端沒有空間
• space-evenly：在每個柵格項目之間放置一個均勻的空間，上下兩端放置一個均勻的空間

為了效果明顯，我們規定一下容器的大小。

css中container中的代碼改為

.container {display: grid;width: 800px;height: 800px;border: 1px solid red;grid-template-columns: 100px 100px 100px 100px;grid-template-rows: auto;grid-template-areas: "one one one one""two two . three""four four four four""five five six six";grid-column-gap: 10px;grid-row-gap: 10px;justify-content: start;align-content: start;}

效果圖

我們再修改一下值，將整個網格放在容器的中間，修改justify-content和align-content都為center。

css中container中的代碼修改為

.container {display: grid;width: 800px;height: 800px;border: 1px solid red;grid-template-columns: 100px 100px 100px 100px;grid-template-rows: auto;grid-template-areas: "one one one one""two two . three""four four four four""five five six six";grid-column-gap: 10px;grid-row-gap: 10px;justify-content: center;align-content: center;}

效果圖為

剩下的值自己去實驗把。我們就做到這里了。

7,grid-column-start,grid-column-end,grid-row-start和grid-row-end。

為了方便演示，我們再添加一個容器container1,

html中代碼為

?

<div class="container"><div class="item-a">1</div><div class="item-b">2</div><div class="item-c">3</div><div class="item-d">4</div><div class="item-e">5</div><div class="item-f">6</div> </div><div class="container1"><div class="item-1">1</div><div class="item-2">2</div><div class="item-3">3</div><div class="item-4">4</div><div class="item-5">5</div><div class="item-6">6</div> </div>

?

css中代碼為

.item-a {grid-area: one;}.item-b {grid-area: two;}.item-c {grid-area: three;}.item-d {grid-area: four;}.item-e {grid-area: five;}.item-f {grid-area: six;}.container {display: grid;width: 800px;height: 800px;border: 1px solid red;grid-template-columns: 100px 100px 100px 100px;grid-template-rows: auto;grid-template-areas: "one one one one""two two . three""four four four four""five five six six";grid-column-gap: 10px;grid-row-gap: 10px;justify-content: center;align-content: center;}.container1 {display: grid;margin-left: 900px;margin-top: -800px;width: 800px;height: 800px;border: 1px solid red;grid-template-columns: 100px 100px 100px 100px;grid-template-rows: 100px 100px 100px 100px;grid-column-gap: 10px;grid-row-gap: 10px;justify-content: center;align-content: center;}.container div{display: grid;height: 100px;border: 1px solid #000;justify-items: center;align-items: center;}.container1 div{display: grid;height: 100px;border: 1px solid #000;justify-items: center;align-items: center;}

效果圖為

接下來我們使用grid-column-start,grid-column-end,grid-row-start和grid-row-end將container1樣式改成和container中樣式一樣的。

css中添加代碼

.item-1 {grid-column-start: 1; grid-column-end: 5;}.item-2 {grid-column-start: 1; grid-column-end: 3;}.item-3 {grid-column-start: 4; grid-column-end: 5;}.item-4 {grid-column-start: 1; grid-column-end: 5;}.item-5 {grid-column-start: 1; grid-column-end: 3;}.item-6 {grid-column-start: 3; grid-column-end: 5;}

上面代碼的簡寫為

.item-1 {grid-column: 1 / 5;}.item-2 {grid-column: 1 / 3;}.item-3 {grid-column: 4 / 5;}.item-4 {grid-column: 1 / 5;}.item-5 {grid-column: 1 / 3;}.item-6 {grid-column: 3 / 5;}

效果圖為

我們就設計出了和container一樣的樣式。

?8,grid-auto-columns / grid-auto-rows

指定任何自動生成的網格軌道(grid tracks)（又名隱式網格軌道）的大小。在你明確定位的行或列（通過?grid-template-rows?/?grid-template-columns），超出定義的網格范圍時，隱式網格軌道被創建了。

上面我們創建了一個4×4的網格，那么當我們再container1容器中再添加一個div，并且超出4×4的網格了呢，我們來試一下。

在html中的container和container1中分別添加一個div，設置class分別為item-h和item-7。

container中添加

?

<div class="item-h">7</div>

?

container1中添加

<div class="item-7">7</div>

將css中兩個container的 justify-content: center;align-content: center改變

?

justify-content: start;align-content: start;

?

再添加代碼

.item-h {grid-column: 6 / 7;grid-row: 6 / 7;} .item-7 {grid-column: 6 / 7;grid-row: 6 / 7;}

效果為

我們在css中的container1中添加

grid-auto-columns: 100px;grid-auto-rows: 100px;

效果圖

我們可以看到超出4×4的網格也別設置了大小，寬100px，高100px。

?9,grid-auto-flow

前面我們說了grid在我們沒有設置元素位置時，默認是從上到下，從左到右的按行依次填充，但是這個也是可以設置。

值

?

• row：告訴自動布局算法依次填充每行，根據需要添加新行
• column：告訴自動布局算法依次填入每列，根據需要添加新列
• dense：告訴自動布局算法在稍后出現較小的網格項時，嘗試填充網格中較早的空缺

設置grid-auto-flow：row;就是默認的排列方式。即按行來排列

設置grid-auto-flow：column;就是按列來排列，即一列一列的排完才開始下一列。

注意：當設置grid-auto-flow：dense;時網格項可能會亂序。

10,justify-self / align-self

沿著 行軸線(row axis)或列軸線（column axis） 對齊 網格項 內的內容。此值適用于單個網格項內的內容。

值

• start：將內容對齊到網格區域的左側
• end：將內容對齊到網格區域的右側
• center：將內容對齊到網格區域的中間（水平居中）
• stretch：填充整個網格區域的寬度（這是默認值）

到這里grid也學了一大部分了，剩下的內容我也沒有弄清楚，畢竟我也是一個初學者。

可以參考一些這個網址進行深入了解：http://www.css88.com/archives/8510/comment-page-1

?

轉載于:https://www.cnblogs.com/xu-xiao-jin/p/9711692.html

總結

以上是生活随笔為你收集整理的css grid布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。