html grid布局,css grid布局使用

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