一、grid布局体验
<div class="grid">
<span style="background-color: aqua;">1</span>
<span style="background-color: rgb(105, 177, 38);">2</span>
<span style="background-color: rgb(21, 32, 196);">3</span>
<span style="background-color: rgb(204, 19, 195);">4</span>
<span style="background-color: rgb(202, 22, 37);">5</span>
<span style="background-color: rgb(255, 217, 0);">6</span>
</div>
.grid{
width: 150px;
height: 300px;
display: grid;
text-align: center;
background-color: antiquewhite;
}
span{
line-height: 50px;
}
运行结果:
二、布局父项常见属性
常见父项属性:
- grid-template-columns:指定列数并设置每列宽度
- row-gap:设置行间距
- column-gap:设置列间距
- gap:统一设置行列间距
- align-items:设置块轴上的子元素排列方式(垂直方向)
- align-content:设置对轨道的对其方式(垂直方向)
- justify-content:设置对轨道的对其方式(水平方向)
1.grid-template-columns 指定列数并设置每列宽度
.grid{
display: grid;
grid-template-columns: 100px 100px 100px;
}
运行结果:
用fr设置比例
.grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.grid{
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
运行结果:
2.row-gap,column-gap和gap 设置行列间距
.grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 20px;
row-gap: 20px;
}
或者使用gap
.grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
运行结果:
3.align-items 设置块轴上的子元素排列方式(垂直方向)
属性值 | 说明 |
---|---|
start | 从上到下 |
end | 从下到上 |
center | 挤在一起居中(垂直居中) |
.grid{
display: grid;
grid-template-columns: 100px 100px 100px;
align-items: center;
column-gap: 20px;
运行截图:
end:
4.align-content 设置对轨道的对其方式(垂直方向)
属性值 | 说明 |
---|---|
start | 默认值 从上到下 |
end | 从下到上 |
center | 垂直居中 |
space-around | 平分剩余空间 |
space-between | 先两边贴边 再平分剩余空间(重要) |
.grid{
display: grid;
grid-template-columns: 100px 100px 100px;
align-content: space-between;
}
5.justify- content 设置对轨道的对其方式(水平方向)
属性值 | 说明 |
---|---|
start | 从左到右 |
end | 从右到左 |
center | 水平居中 |
space-around | 平分剩余空间 |
space-between | 先两边贴边 再平分剩余空间(重要) |
.grid{
display: grid;
grid-template-columns: 100px 100px 100px;
align-content: center;
justify-content: center;
}
三、常见布局应用
.grid{
display: grid;
grid-template-columns: 100px 100px 100px;
align-content: space-between;
justify-content: space-between;
gap: 20px;
width: 340px;
height: 120px;
background-color: antiquewhite;
text-align: center;
}
span{
line-height: 50px;
height: 50px;
}
flex也加入了gap属性:效果和上图一样
.flex{
display: flex;
gap: 20px;
flex-wrap: wrap;
width: 340px;
height: 120px;
background-color: antiquewhite;
text-align: center;
}
span{
flex: 100px;
line-height: 50px;
height: 50px;
}