概念:grid布局又称CSS网格布局,(又名“网格”)是一个二维的基于网格的布局系统,其目的只在于完全改变我们设计基于网格的用户界面的方式
一、作用在容器上
1.display : grid 设置grid布局
2.grid-template-columns : 设置列数
3.grid-template-rows : 设置行数
和grid-template-columns一起,单位统一
a.fr单位
b.repeat()方法
注:网格中提供了一个新的单位:fr ( 比例单位 )
写法:
<style>
#box{
grid-template-columns: 100px 100px 200px 100px;
grid-template-rows: 100px auto 25%;
grid-template-columns: 1fr,1fr,1fr;
grid-template-columns: repeat(3,1fr);
}
</style>
4.grid-template-areas : 根据子元素的网格名字划分区域
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
width: 600px;
height: 600px;
border: 1px solid black;
margin: 100px;
display: grid;
grid-template-rows: 1fr,1fr,1fr;
grid-template-columns: repeat(3,1fr);
grid-template-areas:
"a1 a1 a2"
"a3 a3 a2"
"a3 a3 a2"
;
}
#box div{border: 1px black dashed;background: red;}
#box div:nth-of-type(1){grid-area: a1;}
#box div:nth-of-type(2){grid-area: a2;}
#box div:nth-of-type(3){grid-area: a3;}
</style>
</head>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
5.grid-template:复合写法
是grid-template-rows、grid-template-columns、grid-template-areas的复合写法
代码如下:
grid-template:
"a1 a1 a1" 1fr
"a3 a3 a2" 1fr
"a3 a3 a2" 1fr
/1fr 1fr 1fr;
6.grid-column-gap / grid-row-gap 列间距/行间距
grid-gap : 复合写法;行在前,列在后
7.justify-items : 子项的水平居中方式
默认 : stretch 默认值,拉伸。表现为水平或垂直填充。
start 起始位置对齐
center:中心位置对齐
end:结束位置对齐
8.align-items : 子项的垂直居中方式
默认 : stretch 默认值,拉伸。表现为水平或垂直填充。
start
center
end
place-items : align-items与justify-items复合写法,align-items在前,justify-items在后
9.justify-content : 整体网格的水平对齐方式
属性值:
stretch(默认)
start
end
center
space-between:表现为两端对齐。between是中间的意思,意思是多余的空白间距只在元素中间区域分配
space-around:around是环绕的意思,意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距,最终视觉上边缘两侧的空白只有中间空白宽度一半
space-evenly:evenly是匀称、平等的意思。也就是视觉上,每个flex子项两侧空白间距完全相等
10.align-content : 整体网格的垂直对齐方式
默认:stretch
start
end
center
space-between
space-around
space-evenly
place-content : align-content与justify-content复合写法
二、作用在子项
1.grid-area : 找指定的区域
1.对应网格的名字
2.写对应的水平线的排列数字:grid-area : 1 / 3 / span 2 / 4;
写法:grid-row-start / grid-column-start / grid-row-end / grid-column-end
grid-column-start 水平方向上占据的起始位置
grid-column-end 水平方向上占据的结束位置
grid-row-start 垂直方向上占据的起始位置
grid-row-end 垂直方向上占据的结束位置
注:a.只有在grid-column-end和 grid-row-end 中可以设置span操作。span去设置的不是结束位置,而是个数。
b.正常数字是位置,加上span是个数。
复合写法:
grid-column:3 / 4;
grid-column-start / grid-column-end
grid-row:1 / span 2;
grid-row-start / grid-row-end
2.justify-self 水平居中方式
3.algin-self 垂直居中方式
place-self:justify-self与algin-self复合写法
例子:
<style>
#box{
width: 500px;
height: 500px;
border: 1px solid black;
margin: 100px;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
#box div{border: 1px black dashed;background: red;
/* grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2; */
/* grid-row-end:3; */
/* grid-row-end: span 3; */
/* grid-column: 3 / 4;
grid-row:1 / span 2; */
/* grid-area: 1 / 3 / span 2 / 4; */
}
#box div:nth-of-type(1){
place-self: center start;
}
</style>
</head>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
执行效果如下:
HTML5逆战班2002期–第四周 grid网格布局总结