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>

CSS在网格布局内嵌套了minmax

1 个答案: