CSS 在网格布局中嵌套了 minmax

Question

我有这段 CSS 来设置我的网格的列:

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

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

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

但这只会给我宽度为 100% 的列。这绝对不是我想要的。
我该如何实现？

Answer 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>