分类
css

6、CSS Grid 网格布局教程

CSS Grid 网格布局教程
CSS Grid 网格布局教程

grid 兼容性查看请点此处 最新Grid兼容

grid 布局就是给父元素(容器)添加display:grid,然后使子元素(项目)改变布局,

1 2 3 4 5 6 7 8 9

上面九个正方形的代码如下:没有给正方形设定宽度,是为了方便观察css效果

.seven{

background:#f1c40f;

line-height:100px;

color:#fff;

font-size: 40px;

text-align: center;

}

1.grid-template-columns 属性 | grid-template-rows 属性

grid-template-columns 定义每一列的列宽

grid-template-rows 定义每一行的行高

单位有:fr(分数)、%、px

.section-one-1{

width:400px;

display: grid;

grid-template-columns: 1fr 1fr 1fr;

grid-template-rows: 1fr 1fr 1fr;

}

把九个宫格分成了三行三列,每一个项目的空间占1/3*1/3=1/9

1 2 3 4 5 6 7 8 9

如果容器的宽度没有限定,就会以容器最大的宽度来等比例排列

.section-one-2{

display: grid;

grid-template-columns: 1fr 1fr 1fr;

grid-template-rows: 1fr 1fr 1fr;

}

1 2 3 4 5 6 7 8 9

2.如果要使容器内项目居中,则可使用justify-items属性|align-items 属性|place-items 属性

justify-items属性设置单元格内容的水平位置(左中右 默认)start | center | end | stretch;

align-items属性设置单元格内容的垂直位置(上中下 默认)start | center | end | stretch;

place-items属性是align-items属性和justify-items 属性的合并简写形式。

place-items: align-items(start) justify-items(end)

当容器宽度大于项目的集合宽度,当容器高度大于项目的集合高度,项目会自动居中在每两列之间,如下代码

.section-two-1 {

display: grid;

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

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

place-items: center center;

height:500px;

}

1 2 3 4 5 6 7 8 9

3.grid-row-gap 属性|grid-column-gap 属性|grid-gap 属性

grid-row-gap 属性设置行与行的间隔(行间距)

grid-column-gap 属性设置列与列的间隔(列间距)

grid-gap属性是grid-row-gapgrid-column-gap的合并简写形式

grid-gap: grid-row-gap grid-column-gap

.section-three-1{

display: grid;

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

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

grid-row-gap: 20px;

grid-column-gap: 30px;

}

1 2 3 4 5 6 7 8 9

4.grid-template-areas属性 |grid-area属性

网格布局允许指定”区域”(area),一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域

这个属性需要搭配项目(儿子)的grid-area属性使用

grid-area属性指定项目放在哪一个区域。

.section-four-1{

display: grid;

grid-template-columns: 150px 150px 150px;

grid-template-rows:150px 150px 150px;

grid-template-areas:”header header header”

“header header header”

“two three four”;

}

.section-four-1>span:first-child{

grid-area: header;

}

.section-four-1>span:nth-child(2){

grid-area: two;

}

.section-four-1>span:nth-child(3){

grid-area: three;

}

.section-four-1>span:last-child{

grid-area: four;

}

2 3 4

5.repeat() 函数

repeat 函数作用在可以把重复的简写,代码如下。第一个参数为重复的次数,第二个参数是重复的数值

.section-five-1{

width:500px;

display: grid;

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

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

}

1 2 3 4 5 6 7 8 9

repeat()重复某种模式也是可以的。

如下图定义了6列,第一列和第四列的宽度为100px,第二列和第五列为220px,第三列和第六列为1fr。

.section-five-2{

display: grid;

grid-template-columns:repeat(2,100px 220px 1fr);

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

}

1 2 3 4 5 6 7 8 9

6.minmax(min,max) 函数

minmax(min,max) 函数产生一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值。

.section-six-1{

display: grid;

grid-template-columns:1fr 1fr minmax(50px, 100px);

grid-template-rows: 1fr 1fr minmax(50px, 150px);

}

1 2 3 4 5 6 7 8 9

7.grid-auto-flow 属性

grid-auto-flow属性决定,默认值是row,即”先行后列”。也可以将它设成column,变成”先列后行”。

.section-seven-1{

display: grid;

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

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

grid-auto-flow: column;

}

1 2 3 4 5 6 7 8 9

8.justify-content属性|align-content属性|place-content属性

justify-content属性是整个内容区域在容器里面的水平位置(左中右)start | end | center | stretch | space-around | space-between | space-evenly;

align-content属性是整个内容区域的垂直位置(上中下)start | end | center | stretch | space-around | space-between | space-evenly;

place-content属性:align-content justify-content

justify-content属性值只能体现在grid-template-columns中某一个值为auto才会有效果。如下

.section-eight-1{

display: grid;

grid-template-columns:150px auto 150px;

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

place-items: center center;

height: 500px;

justify-content: start;

}

1 2 3 4 5 6 7 8 9

justify-content:stretch;恢复默认情况。如下

.section-eight-2{

display: grid;

grid-template-columns:150px auto 150px;

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

place-items: center center;

height: 500px;

justify-content:stretch;

}

1 2 3 4 5 6 7 8 9

justify-content:space-around;每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。如下

.section-eight-3{

display: grid;

grid-template-columns:150px auto 150px;

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

place-items: center center;

height: 500px;

justify-content:space-around;

}

1 2 3 4 5 6 7 8 9

justify-content:space-between;项目与项目的间隔相等,项目与容器边框之间没有间隔。如下

.section-eight-4{

display: grid;

grid-template-columns:150px auto 150px;

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

place-items: center center;

height: 500px;

justify-content:space-between;

}

1 2 3 4 5 6 7 8 9

justify-content:space-evenly;项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。如下

.section-eight-5{

display: grid;

grid-template-columns:150px auto 150px;

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

place-items: center center;

height: 500px;

justify-content:space-evenly;

}

1 2 3 4 5 6 7 8 9

align-content属性和justify-content属性是一样的

9. grid-column-start 属性 | grid-column-end 属性

grid-row-start 属性 | grid-row-end 属性

这些属性定义在项目上面.

grid-column-start属性:左边框所在的垂直网格线

grid-column-end属性:右边框所在的垂直网格线

grid-row-start属性:上边框所在的水平网格线

grid-row-end属性:下边框所在的水平网格线

.section-nine-1{

width:400px;

display:grid;

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

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

}

.section-nine-1>span:first-child{

grid-column-start: 2;

grid-column-end: 4;

}

1号项目的左边框是第二根垂直网格线,右边框是第四根垂直网格线。如下

1 2 3 4 5 6 7 8 9

上图中,只指定了1号项目的左右边框,没有指定上下边框,所以会采用默认位置,即上边框是第一根水平网格线,下边框是第二根水平网格线。

下面的例子是指定四个边框位置的效果。

1号项目的左边框是第1根垂直网格线,右边框是第3根垂直网格线。上边框是第2根水平网格线,下边框是第4根水平垂直线。如下

.section-nine-2{

width:400px;

display:grid;

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

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

}

.section-nine-2>span:first-child{

grid-column-start: 1;

grid-column-end: 3;

grid-row-start: 2;

grid-row-end: 4;

}

1 2 3 4 5 6 7 8 9

这四个属性的值还可以使用span关键字,表示”跨越”,即左右边框(上下边框)之间跨越多少个网格。

上面代码表示,1号项目的左边框距离右边框跨越3个网格。上边框距离下边框跨越2个网格

.section-nine-3{

width:400px;

display:grid;

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

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

}

.section-nine-3>span:first-child{

grid-column-start:span 3;

grid-row-start:span 2;

}

1 2 3 4 5 6 7 8 9

grid-column 属性 | grid-row 属性

grid-column属性是grid-column-startgrid-column-end的合并简写形式

grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。

.section-nine-3>span:first-child{

grid-column-start:1/3;

grid-row:2/4;

}

.section-nine-3>span:first-child{

grid-column-start: 1;

grid-column-end: 3;

grid-row-start: 2;

grid-row-end: 4;

}

10.justify-self 属性 | align-self 属性 | place-self 属性

justify-self属性设置单元格内容的水平位置(左中右),跟justify-items属性的用法完全一致,但只作用于单个项目。

justify-self属性设置单元格内容的垂直位置(上中下),跟align-items属性的用法完全一致,也是只作用于单个项目。

place-self属性是align-self属性和justify-self属性的合并简写形式。

如果省略第二个值,place-self属性会认为这两个值相等。

place-self: (align-self) (justify-self);

两个属性都可以取四个值。start:对齐单元格的起始边缘。 end:对齐单元格的结束边缘。

center:单元格内部居中。stretch:拉伸,占满单元格的整个宽度(默认值)。

.section-ten-1{

width:400px;

display:grid;

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

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

}

.section-ten-1>span:first-child{

justify-self: start;

}

1 2 3 4 5 6 7 8 9

发表评论

电子邮件地址不会被公开。 必填项已用*标注