Note:設置網格布局后，容器子元素(項目)的float、display:inline-block、 display:table-cell、 vertical-align 和Column-*等設置都將失效

2、grid-template-columns 屬性

grid-template-rows屬性

容器指定網格布局以后，接著就要劃分行和列. gri-template-columns屬性定義每一列的列寬 ，grid-template-rows 屬性定義每一行行高

1 .contain{

2 　　display:grid;

3 　　grid-template-rows: 100px 100px 100px;

4 　　grid-template-columns:100px 100px 100px;

5 }

(1) repeat()

參數重復寫非常麻煩，可以使用repeat()函數，簡化重復值， repeat()接受兩個參數，第一個參數是重復次數，第二個參數是重復值

1 .contain{

2 display:grid;

3 grid-template-rows: repeat(4,33%);

4 grid-template-columns:repeat(3,33%);

5 }

6 //或

7 .contain{

8 display:grid;

9 grid-template-rows: repeat(4,100px 20px 80px);

10 grid-template-columns:repeat(4,100px 20px 80px);

11 }

(2) auto-fill 關鍵字

有的時候單元格大小是固定，但是容器的大小不確定。如果希望每一行(或沒一列)容納盡可能多的單元格，這時可以使用auto-fill關鍵字

(3) fr關鍵字

網格布局提供fr關鍵字(fraction的縮寫，意為“片段”) 。如果兩列寬度為1fr 和2fr,就表示后面是前者的兩倍

1 .contain{

2 display:grid;

3 grid-template-rows: repeat(4,100px);

4 grid-template-columns:repeat(3,1fr);

5 }

(4)minmax()

minmax()函數產生一個長度范圍，表示長度在這個范圍之內，它接受兩個參數，分別最小值和最大值

1 .contain{

2 display:grid;

3 grid-template-rows: repeat(5,100px);

4 grid-template-columns:1fr 1fr minmax(300px, 1fr);;

5 }

(5)auto 關鍵字

auto 關鍵字表示由瀏覽器自己決定長度

1 .contain{

2 display:grid;

3 grid-template-rows: repeat(5,100px);

4 grid-template-columns:200px auto 200px;

5 }

(6)網格線名稱

grid-template-columns 屬性 和grid-template-rows 屬性里面，還可以使用方括號，指定每一根網格的名稱，方便以后的引用

1 .contain{

2 display:grid;

3 grid-template-rows: repeat(5,100px);

4 grid-template-columns:[c1] 100px [c2] 100px [c3] auto;

5 }

Note:網格布局允許同一條線多個名字比如 [c1 c2]

(7) 布局實例

grid-template-columns 屬性 和grid-template-rows 屬性 值可以使用百分比

1 .contain{

2 　　display:grid;

3 　　grid-template-rows: repeat(5,100px);

4 　　grid-template-columns:70% 30%;

5 }

3.grid-row-grap屬性 grid-column-gap屬性 grid-gap屬性

grid-row-gap屬性設置行與行的間隔(行間距)，grid-column-gap屬性設置列與列間隔(列間距)

1 .contain{

2 　　display:grid;

3 　　grid-template-rows: repeat(5,100px);

4 　　grid-template-columns:200px 200px 200px;

5 　　grid-row-gap: 20px;

6 　　grid-column-gap: 20px;

7 }

Note:grip-gap 屬性 grip-row-gap 和 grip-column-gap的合并寫法

grip-gap:

4、grid-template-areas 屬性

網格布局允許指定 "區域"(area),一個區域由單個或多個單元格組成，grid-template-areas屬性用于自定義區域

1 .contain{

2 　　display:grid;

3 　　grid-template-rows: repeat(5,100px);

4 　　grid-template-columns:200px 200px 200px;

5 　　grid-gap: 10px 30px;

6 　　grid-template-areas: 'a a a' 'b c d' 'e f g' ;

7 }

5、grid-auto-flow 屬性

劃分網格以后，容器的子元素會按照順序，自動放置在每一塊網格。默認的放置順序是先行后列，即先填滿第一行，在開始放入第二行

Note: grid-auto-flow 屬性決定，默認值 row ,即先行后列。也可以設置成cloumn ,變成先列后行

1 .contain{

2 display:grid;

3 grid-template-rows: repeat(5,100px);

4 grid-template-columns:200px 200px 200px;

5 grid-gap: 10px 30px;

6 grid-template-areas: 'a a a' 'b c d' 'e f g' ;

7 grid-auto-flow:row;

8 }

9

10

11 /* 或 */

12 .contain{

13 display:grid;

14 grid-template-rows: repeat(5,100px);

15 grid-template-columns:200px 200px 200px;

16 grid-gap: 10px 30px;

17 grid-template-areas: 'a a a' 'b c d' 'e f g' ;

18 grid-auto-flow:column;

19 }

Note:grid-auto-flow屬性除了設置成row 和 column ,還可以設置成 row dense 和 cloumn dense 。這兩個值主要用于項目指定位置以后剩余位置的排列方式

1 .contain{

2 　　display:grid;

3 　　grid-template-rows: repeat(5,100px);

4 　　grid-template-columns:200px 200px 200px;

5 　　grid-gap: 10px 30px;

6 　　grid-auto-flow:column dense;

7 　　//或

8 　　//grid-auto-flow:row dense

9 }

6、 justify-items屬性 align-items屬性 place-items屬性

justify-items屬性設置單元格內容的水平位置(左中右)，align-items屬性設置單元格內容的垂直位置(上中下)

1 .contain{

2 　　display:grid;

3 　　grid-template-rows: repeat(5,100px);

4 　　grid-template-columns:200px 200px 200px;

5 　　grid-gap: 10px 30px;

6 　　grid-auto-flow:column dense;

7 　　justify-items: end;

8 　　align-items:end;

9 　　//或 place-items:end end;

10 }

Note:pace-items 屬性 是align-items屬性和justify-items屬性合并寫法

如果第二個值省略，默認與第一個值相等

7、justify-content 屬性內容區域水平位置(左中右)，align-content 屬性內容區域垂直位置(上中下)，

start:對齊容器的起始邊框。

end - 對齊容器的結束邊框。

center - 容器內部居中。

space-around - 每個項目兩側的間隔相等。所以，項目之間的間隔比項目與容器邊框的間隔大一倍。

space-between - 項目與項目的間隔相等，項目與容器邊框之間沒有間隔。

space-evenly - 項目與項目的間隔相等，項目與容器邊框之間也是同樣長度的間隔。

1 .contain{

2 　　display:grid;

3 　　grid-template-rows: repeat(5,100px);

4 　　 grid-template-columns:200px 200px 200px;

5 　　grid-gap: 10px 30px;

6 　　grid-auto-flow:column dense;

7 　　justify-content: end;

8 　　align-items: end;

9 　　//place-content: end start;

10 }

Note: place-content: align-content屬性 和 justify-content屬性的簡寫

8、grid-auto-columns 屬性， grid-auto-rows 屬性 瀏覽器用來設置多余網格列寬和行高。它們的寫法與grid-template-columns和grid-template-rows完全相同。如果不指定這兩個屬性，瀏覽器完全根據單元格內容的大小，決定新增網格的列寬和行高。

1 .contain{

2 　　display:grid;

3 　　grid-template-rows: repeat(3,100px);

4 　　grid-template-columns:200px 200px;

5 　　grid-auto-rows: 300px;

6 }

9、grid-template屬性是grid-template-columns、grid-template-rows和grid-template-areas這三個屬性的合并簡寫形式。

grid屬性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow這六個屬性的合并簡寫形式。

二、項目屬性

1、項目位置可以指定，具體方法就是指定項目四個邊框，分別定位在哪根線上

gird-column-start 屬性 :左邊框所在垂直網格線

grid-column-end 屬性 ：右邊框所在垂直網格

grid-row-start 屬性 ：上邊框所在水平網格

grid-row-end 屬性 ：下邊框所在水平網格

1 .bgcolor2{

2　　 grid-column-start: 1;

3 　　grid-column-end: 2;

4 　　grid-row-start: 2;

5 　　grid-row-end: 4;

6　}

(1) span 關鍵字

這四個屬性可以使用span 關鍵字，表示“跨越”，即左右邊框(上下邊框)跨越多少個網格

1 .grid1{

2 　　background-color: aliceblue;

3 　　grid-column-start: span 3;

4 }

Note :這四個屬性產生項目的重疊，使用z-

2.grid-column屬性 ，grid-row 屬性

grid-column屬性是 grid-colum-start屬性 和gird-column-end屬性的合并簡寫

grid-row 屬性是 grid-row-start屬性 和grid-row-end 屬性的合并寫法

1 .grid2{

2 　　background-color: aqua;

3 　　grid-column: 1 / 3;

4 　　grid-row:1 / 3;

5 }

6 //等價于

7 .grid2{

8 　　background-color: aqua;

9 　　grid-column-start:1;

10 　　grid-column-end:3;

11 　　grid-row-start:1;

12 　　grid-row-end: 3;

13 }

Note:斜桿以及后面可以省略，默認跨域一個網格

3、grid-area屬性 指定項目放在哪一個區域

1 .grid2{

2 background-color: aqua;

3 grid-area: e;

4 // grid-area: 2 / 1 / 3 / 4;

5 }

Note:grid-area屬性還可以用作grid-row-start 、 grid-column-start 、grid-row-end 、 grid-column-end 的合并簡寫直接指定項目位置

grid-area: / / / ;

4、justify-self 屬性，align-self熟悉， place-self屬性

justify-self屬性，設置單元格內容的水平位置(左中右)，和justify-items屬性用法一致但只用于單個項目

align-self屬性，設置單元格內容垂直位置(上中下)，和align-items屬性用法一致，也只用于單個項目

(1)這兩個屬性都可以去四個值

start:對齊單元格起始邊緣

end:對其單元格結束邊緣

center:單元格內部居中

stretch:拉伸，占滿整個單元格(默認值)

1 .grid2{

2 　　background-color: aqua;

3 　　justify-self: stretch;

4 　　align-self: center;

5 　　//place-self：stretch center;

6 }

Note:place-self 屬性是 align-self屬性 和justify-self屬性合并寫法

如果第二個值省略則會認為兩個值相等。

標簽：rows,布局,grid,columns,template,200px,css,屬性

來源： https://www.cnblogs.com/hongding/p/11332395.html

總結

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

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