自适应何必媒体查询
简单的自适应可以使用grid布局的grid-template-columns和grid-gap属性实现
例如:要实现一行三个div并自适应宽度,同时使用justify-items和align-items属性实现靠左,并使用margin属性实现中间间隔。
HTML代码:
<div class="grid-container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
CSS代码:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(474px, 1fr));
grid-gap: 5px;
justify-items: start;
align-items: start;
}
.box {
height: 200px;
margin-right: 5px;
margin-bottom: 5px;
background-color: #ccc;
}
解释:
- .grid-container: 设置为grid布局,使用grid-template-columns属性设置每一列的宽度为minmax(474px, 1fr),即最小宽度为474px,最大宽度为1fr(即自适应宽度)。使用grid-gap属性设置列与列之间的间隔为5px。同时使用justify-items为start,align-items为start,使子元素靠左对齐。
标签:设置,items,查询,适应,start,宽度,grid,5px,何必 From: https://www.cnblogs.com/yx-liu/p/17448981.html
- .box: 设置高度为200px,同时设置右边距和下边距为5px,使子元素之间有间隔。设置背景颜色为灰色。