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

1,display屬性

display有三個(gè)值，

?

• grid?：生成一個(gè)塊級(jí)網(wǎng)格
• inline-grid?：生成一個(gè)內(nèi)聯(lián)網(wǎng)格
• subgrid?：如果你的網(wǎng)格容器本身是另一個(gè)網(wǎng)格的網(wǎng)格項(xiàng)（即嵌套網(wǎng)格），你可以使用這個(gè)屬性來(lái)表示，它的行/列的大小繼承自它的父級(jí)網(wǎng)格容器，而不是自己指定的。　　

我們先創(chuàng)建一個(gè)grid的網(wǎng)格容器

在html中寫入代碼

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

css中寫入代碼

.container{display: grid;}

這樣我們就創(chuàng)建好了一個(gè)網(wǎng)格容器，因?yàn)間rid容器時(shí)隱性容器，在我們沒有向容器里面添加元素時(shí)，是看不到效果的，grid容器在我們沒有設(shè)置大小時(shí)，默認(rèn)寬度為100%，高度為0.

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

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

　　用來(lái)定義網(wǎng)格的列和行，即設(shè)置幾行幾列。

值

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

（1）px

我們?cè)赾ontainer中添加代碼

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

這樣我們就創(chuàng)建了一個(gè)三行，三列的網(wǎng)格，寬度分別為100px,100px,100px。高度分別為100px,50px,100px。

但是，我們?cè)跒g覽器中是看不到效果的，我們需要向里面添加元素，才能看到效果。

我們?cè)趆tml中添加以下代碼

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

我們?cè)赾ss中添加代碼放方便查看效果。

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

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

?

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

（2）fr

接下來(lái)我們將單位“px”改為“fr”，

css中container中修改代碼

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

效果圖為

因?yàn)槲覀兛偣灿?fr，所以將容器的寬度平均分為了4份，一個(gè)fr占一份，兩個(gè)占兩份，一次類推，因?yàn)槲覀儧]有設(shè)置容器的寬度，也沒有用px單位設(shè)置網(wǎng)格格子的寬度，所以容器默認(rèn)寬度為100%。

注意：當(dāng)fr和px共存時(shí)，是將px的大小減去之后，在剩余的大小內(nèi)在均分。

（3）auto

接下來(lái)我們?cè)侔補(bǔ)uto加進(jìn)去。

css中container中修改代碼

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

效果圖為

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

（4）n%

至于n%，n時(shí)多少就占整個(gè)容器的百分之多少。

（5）repeat()

我們修改css中container中的代碼

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

上面的代碼等價(jià)與下面的代碼

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

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

?3,grid-template-areas

指定的 網(wǎng)格區(qū)域(Grid Area) 名稱來(lái)定義網(wǎng)格模板。重復(fù)網(wǎng)格區(qū)域的名稱導(dǎo)致內(nèi)容跨越這些單元格。這個(gè)語(yǔ)法本身可視作網(wǎng)格的可視化結(jié)構(gòu)。

值

?

• <grid-area-name>：由網(wǎng)格項(xiàng)的?grid-area?指定的網(wǎng)格區(qū)域名稱
• .（點(diǎn)號(hào)） ：代表一個(gè)空的網(wǎng)格單元
• none：不定義網(wǎng)格區(qū)域

?

修改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;}

效果圖

因?yàn)槲覀儾淮_定有幾行，所以我們?cè)O(shè)置的是auto，這樣我們就不能設(shè)置行高了，子元素的高度是多少它的高度就是多少，但是我們可以設(shè)置子元素的高度。就能設(shè)置網(wǎng)格的高度了。

所以我們?cè)O(shè)置子元素高度為100px，對(duì)container下的div設(shè)置高度

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

效果圖為

這樣，我們就設(shè)置好了這樣一個(gè)網(wǎng)格，第一行區(qū)域名稱為“one”，第二行一二列區(qū)域名稱為“two”，第二行第四列區(qū)域名稱為“three”，第三行區(qū)域名稱為“four”，第四行一二列名稱為“five”，第四行三四列名稱為“six”。

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

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

我們修改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;}?

效果圖為

下面兩段代碼等價(jià)，下面的代碼上上面的簡(jiǎn)寫。

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

5,justify-items /?align-items

沿著 行軸線(row axis) 或列軸線（column axis）對(duì)齊 網(wǎng)格項(xiàng)(grid items) 內(nèi)的內(nèi)容。該值適用于容器內(nèi)的所有網(wǎng)格項(xiàng)。

值

?

• start：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域(grid area)的左側(cè)
• end：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的右側(cè)
• center：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的中間（水平居中）
• stretch：填滿網(wǎng)格區(qū)域?qū)挾?#xff08;默認(rèn)值）

修改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

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

值

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

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

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;}

效果圖

我們?cè)傩薷囊幌轮?#xff0c;將整個(gè)網(wǎng)格放在容器的中間，修改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;}

效果圖為

剩下的值自己去實(shí)驗(yàn)把。我們就做到這里了。

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

為了方便演示，我們?cè)偬砑右粋€(gè)容器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;}

效果圖為

接下來(lái)我們使用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;}

上面代碼的簡(jiǎn)寫為

.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;}

效果圖為

我們就設(shè)計(jì)出了和container一樣的樣式。

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

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

上面我們創(chuàng)建了一個(gè)4×4的網(wǎng)格，那么當(dāng)我們?cè)賑ontainer1容器中再添加一個(gè)div，并且超出4×4的網(wǎng)格了呢，我們來(lái)試一下。

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

container中添加

?

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

?

container1中添加

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

將css中兩個(gè)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;}

效果為

我們?cè)赾ss中的container1中添加

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

效果圖

我們可以看到超出4×4的網(wǎng)格也別設(shè)置了大小，寬100px，高100px。

?9,grid-auto-flow

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

值

?

• row：告訴自動(dòng)布局算法依次填充每行，根據(jù)需要添加新行
• column：告訴自動(dòng)布局算法依次填入每列，根據(jù)需要添加新列
• dense：告訴自動(dòng)布局算法在稍后出現(xiàn)較小的網(wǎng)格項(xiàng)時(shí)，嘗試填充網(wǎng)格中較早的空缺

設(shè)置grid-auto-flow：row;就是默認(rèn)的排列方式。即按行來(lái)排列

設(shè)置grid-auto-flow：column;就是按列來(lái)排列，即一列一列的排完才開始下一列。

注意：當(dāng)設(shè)置grid-auto-flow：dense;時(shí)網(wǎng)格項(xiàng)可能會(huì)亂序。

10,justify-self / align-self

沿著 行軸線(row axis)或列軸線（column axis） 對(duì)齊 網(wǎng)格項(xiàng) 內(nèi)的內(nèi)容。此值適用于單個(gè)網(wǎng)格項(xiàng)內(nèi)的內(nèi)容。

值

• start：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的左側(cè)
• end：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的右側(cè)
• center：將內(nèi)容對(duì)齊到網(wǎng)格區(qū)域的中間（水平居中）
• stretch：填充整個(gè)網(wǎng)格區(qū)域的寬度（這是默認(rèn)值）

到這里grid也學(xué)了一大部分了，剩下的內(nèi)容我也沒有弄清楚，畢竟我也是一個(gè)初學(xué)者。

可以參考一些這個(gè)網(wǎng)址進(jìn)行深入了解：http://www.css88.com/archives/8510/comment-page-1

?

轉(zhuǎn)載于:https://www.cnblogs.com/xu-xiao-jin/p/9711692.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。