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

【问题标题】：CSS grid items based on minimum width and percentage基于最小宽度和百分比的 CSS 网格项目
【发布时间】：2018-09-05 05:06:00
【问题描述】：

我目前有一个 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;
}

【问题讨论】：

标签： html css grid-layout css-grid

【解决方案1】：

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

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

这是做什么的：

repeat - 这只是告诉网格多次执行以下操作。
auto-fit - 这是“重复”中的第一个参数，并且告诉网格'通过将列扩展为来适应网格中的列占据整个网格空间。这也意味着如果项目不它们将放在一行中。
minmax(200px, 1fr) 表示网格中的每一列最小为 200 像素，最大为等量空间（因此，如果有三个项目，则每个列将是 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

【讨论】：