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

Question

我目前有一个设定为网格展示的

样式。每个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;
}

- Grant Emerson

Answer 1

如果您的包装中只有三个盒子，并且希望当包装器小于600像素时它们换行到另一行，那么这可能是您要找的内容。

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

这段代码的作用是：

1. repeat - 表示将以下操作执行多次。
2. auto-fit - 是在'repeat'内部的第一个参数，表明网格布局会通过将列展开以占据整个网格空间来适应列宽。同时，如果项不能放在一行中，则会换行显示。
3. 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

- Chris Boon