自适应何必媒体查询

自适应何必媒体查询

简单的自适应可以使用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，使子元素靠左对齐。

• .box: 设置高度为200px，同时设置右边距和下边距为5px，使子元素之间有间隔。设置背景颜色为灰色。