具有全宽行的 CSS 网格模板

Question

我正在尝试创建 2 列模板，该模板可转换为 1 列以用于较低分辨率的设备。这就是我到目前为止所做的事情

<div class='wrapper'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 800px));
  grid-gap: 30px;
}


.item {
  height: 40px;
  background-color: blue;
  border: 1px solid black;
  margin: 10px;
}

https://codepen.io/anon/pen/VJZeeX 当我缩小分辨率时，它变为一列，但右侧留下了很多空间。我希望 .item div 占用整个可用空间。另外我想避免使用@media 查询。我在想也许我应该以某种方式将 CSS 网格与 flexbox 结合起来？但不确定这是否会导致任何地方。谢谢

Answer 1

这应该是最好的镜头。

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  grid-gap: 30px;

}


.item {
  height: 40px;
  background-color: blue;
  border: 1px solid black;
  margin: 10px;
}