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;
}

具有全宽行的CSS网格模板

1 个答案: