Question

我目前有一个div风格作为网格显示。 grid-template-columns分别是身体的1/3。但是，我想将每个框限制为最小宽度，例如200px。这样，在手机上，我不会有三个非常瘦的盒子。有没有办法做到这一点，或者我是以完全错误的方式处理问题？

.wrapper {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  border-color: #Dd6161;
  border-style: solid;
  border-width: 2px;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 14px;
}

Answer 1

如果包装器中只有三个盒子，并且如果包装器小于600px，则希望它们包装到另一行上，这可能是您正在寻找的。

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

这是做什么的：

repeat - 这只是告诉网格多次执行以下操作。
auto-fit - 这是'重复'中的第一个参数告诉网格“通过扩展它们来适应网格中的列占据网格的整个空间。这也意味着物品不是适合他们将包裹的一行。
minmax(200px, 1fr)表示网格中的每一列最小为200px，最大等于空间（如果有三个项目，则各自为33.333％）。

这是一个例子： https://codepen.io/chrisboon27/pen/RMjGme

或者，如果您希望它们全部变为全宽（因此一行包含三行），您将使用grid-template-columns: repeat(3, minmax(200px, 1fr));，然后使用媒体查询将其更改为grid-template-columns: 1fr;以使其成为单个列：

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
}
@media (max-width: 600px){
  .wrapper{
    grid-template-columns: 1fr;
  }
}

以下是此示例： https://codepen.io/chrisboon27/pen/pLdNjb

基于最小宽度和百分比的CSS网格项

1 个答案: