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

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

如果包装器中只有三个框，并且如果包装器小于600像素，则希望它们包装到另一行，则可能是您要寻找的内容。

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

这是什么：

1. repeat -这只是告诉gird进行以下多次。
2. auto-fit-这是“重复”中的第一个参数，并告诉网格通过扩展列以占据网格的整个空间来使其适合网格中的列。这也意味着，如果项目不适合放在一行中，则将它们包装起来。
3. 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