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

像下面这样min()在里面使用minmax()

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