CSS嵌套在网格布局内的minmax答案

【问题标题】：CSS nested minmax inside of grid layoutCSS嵌套在网格布局内的minmax
【发布时间】：2020-11-10 05:14:01
【问题描述】：

我有这段 css 来设置我的网格的列：

grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

这很好用，但我想扩展它，这样我就可以使用一个百分比值，最大为一定数量的像素，如下所示：

grid-template-columns: repeat(auto-fill, minmax(minmax(15%, 180px), 1fr));

但这只是给了我 100% 宽度的列。这绝对不是我想要的。
我该如何做到这一点？

【问题讨论】：

标签： css css-grid

【解决方案1】：

在minmax() 中使用min()，如下所示

.container {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15%, 180px), 1fr));
  grid-gap:10px;
  margin:5px;
}
.container > * {
  height:50px;
  background:red;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="container" style="grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

【讨论】：

如果min 中的一个术语是max-content 怎么办？它似乎不起作用，仅适用于固定长度/百分比。
@ranisalt 是的，它不适用于最大内容。 min 只接受一个计算（相关：stackoverflow.com/a/62523544/8620333