前端CSS3布局display:grid用法
前端CSS3布局display:flex用法
1. 先附上代码
点击查看代码
display:flex
1
2
3
4
5
6
7
8
效果图
给grid-box加上display: grid
点击查看代码
.grid-box {
width: 100%;
background-color: lightseagreen;
display: grid;
}
效果图
可以看到并没有什么变化，说明grid默认纵向排列
2. 接下来详解grid布局的几个常用属性
- grid-template-columns
- grid-template-rows
- gap
- grid-template-areas
- justify-items
- align-items
1. grid-template-columns
决定网格布局中的列数（和宽度）
网格呈三列排列且每列120px
上代码
点击查看代码
.grid-box {
width: 100%;
background-color: lightseagreen;
display: grid;
grid-template-columns: 120px 120px 120px;
}
效果图
简写方式
grid-template-columns: repeat(3, 120px)
也可这样设置
grid-template-columns: 120px auto 120px
两边的宽度为120px，中间的宽度自动填充
效果图
可用fr表示比例关系(fraction 的缩写，意为"片段”)
将宽度平均分成3等份
上代码
点击查看代码
.grid-box {
width: 100%;
background-color: lightseagreen;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
效果图
将宽度分成3份，每份各占1 2 3
上代码
点击查看代码
.grid-box {
width: 100%;
background-color: lightseagreen;
display: grid;
grid-template-columns: 1fr 2fr 3fr;
}
效果图
单元格大小固定，但容器大小不确定，auto-fill属性就会自动填充
上代码
点击查看代码
.grid-box {
width: 100%;
background-color: lightseagreen;
display: grid;
grid-template-columns: repeat(auto-fill, 170px);
}
效果图
minmax()函数产生一个长度范围，接受两个参数，分别为最小值和最大值
上代码
点击查看代码
.grid-box {
width: 100%;
background-color: lightseagreen;
display: grid;
grid-template-columns: 1fr minmax(150px, 300px);
}
效果图
第二列的最小宽度为150px，最大宽度为300px
2. grid-template-rows
规定网格布局中行的高度
前三行每行高120px
上代码
点击查看代码
.grid-box {
width: 100%;
background-color: lightseagreen;
display: grid;
grid-template-rows: 120px 120px 120px;
}
效果图
简写方式
grid-template-rows: repeat(3, 120px)
也可这样设置
grid-template-rows: 120px auto 120px
第一行高度为120px，第二行的高度自动，第三行的高度为120px
效果图
可用fr表示比例关系(fraction 的缩写，意为"片段”)
将前三行的高度设置为1fr 2fr 3fr
上代码
点击查看代码
.grid-box {
width: 100%;
background-color: lightseagreen;
display: grid;
grid-template-rows: 1fr 2fr 3fr;
}
效果图
minmax()函数产生一个长度范围，接受两个参数，分别为最小值和最大值
上代码
点击查看代码
.grid-box {
width: 100%;
background-color: lightseagreen;
display: grid;
grid-template-rows: 80px minmax(150px, 300px) 120px;
}
效果图
3. gap
规定网格布局中行与列之间间隙的尺寸
上代码
点击查看代码
.grid-box {
width: 100%;
background-color: lightseagreen;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr 2fr 3fr;
gap: 1em;
}
效果图
还可以这样写
grid-gap: 1em 2em;
1em是行之间的间隙，2em是列之间的间隙
效果图
4. grid-template-areas
在网格布局中规定区域
上代码
点击查看代码
display:flex
1
2
3
4
5
6
7
8
效果图
myArea1 myArea1 . .表示4列，一个点表示1列
item1占1行2列（第1行的第1列和第2列）
item5占2行1列（第1列的第2行和第3行）
item8占2行1列（第2列的第2行和第3行）
4. justify-items
纵轴上的对齐方式
上代码
点击查看代码
.grid-box {
width: 100%;
height: 600px;
background-color: lightseagreen;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
效果图
justify-items: flex-start;（默认值）
效果图
justify-items: center;
效果图
justify-items: flex-end;
效果图
4. align-items
横轴上的对齐方式
上代码
点击查看代码
.grid-box {
width: 100%;
height: 600px;
background-color: lightseagreen;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
效果图
align-items: flex-start;（默认值）
效果图
align-items: center;
效果图
align-items: flex-end;
效果图