如何指定repeat()将使用自动适合/填充创建的最大列数？

Question

有没有办法在不使用媒体查询的情况下限制创建的列数,并将其与自动调整/填充相结合？

例如:

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

创建精彩,响应迅速的布局.但想象一下,设计最多需要3列 - 即使在广泛的浏览器中也是如此.如果空间允许,它会愉快地显示4,5个更多列.

使用媒体查询,我可以指定大屏幕获取:

grid-template-columns: 1fr 1fr 1fr;

小屏幕得到:

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

但这感觉不对.有没有办法告诉我的网格布局重复最多n次,仍然使用重复和自动适合/填充？

更新:这不是重复:如何使用CSS网格和自动填充/拟合限制较大视口中的列数？

我问如何使视口的代码也适用于较小的视口.上面提到的问题(和答案)只是我的问题的起点.

Answer 1

CSS 自定义属性（“CSS 变量”）来救援

.grid {
  --repeat: auto-fit;
}
@media (min-width: calc(250px * 3)) {
  .grid {
    --repeat: 3;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--repeat, auto-fit), minmax(calc(250px * 1) , 1fr));
  grid-gap: 8px;
}

.grid .item {
  background-color: silver;
  padding: 8px;
}

<div class="grid">
  <div class="item">Lorem, ipsum.</div>
  <div class="item">Soluta, voluptatibus!</div>
  <div class="item">Reprehenderit, consequuntur.</div>
  <div class="item">Temporibus, veritatis!</div>
  <div class="item">Consequatur, voluptates.</div>
  <div class="item">Distinctio, adipisci.</div>
  <div class="item">Repellat, corrupti.</div>
  <div class="item">Quia, corporis.</div>
  <div class="item">Nobis, aut.</div>
  <div class="item">Dicta, officiis?</div>
  <div class="item">Voluptate, tempora?</div>
  <div class="item">Nihil, earum?</div>
  <div class="item">Placeat, aspernatur!</div>
  <div class="item">Officia, sunt?</div>
  <div class="item">Atque, temporibus!</div>
  <div class="item">Rerum, unde!</div>
  <div class="item">Hic, molestias!</div>
  <div class="item">Et, repellat!</div>
  <div class="item">Earum, itaque.</div>
  <div class="item">Doloribus, facilis.</div>
  <div class="item">Eius, alias!</div>
  <div class="item">Est, officia.</div>
  <div class="item">Ad, porro!</div>
  <div class="item">Ipsum, voluptates.</div>
  <div class="item">Animi, eligendi.</div>
  <div class="item">Tempore, hic!</div>
  <div class="item">Voluptatibus, illum.</div>
  <div class="item">Autem, cumque!</div>
  <div class="item">Cupiditate, minus!</div>
  <div class="item">Tenetur, aliquam.</div>
</div>

评论

提问者在他的 OP 中想要一个不使用媒体查询的解决方案。该解决方案确实使用了媒体查询，但方式有所不同。媒体查询中唯一改变的是 CSS 自定义属性的值。

我们甚至可以在:root选择器中使用“全局”自定义属性

:root {
  --repeat: auto-fit;
}
@media (min-width: calc(250 * 3px)) {
  :root {
    --repeat: 3;
  }
}

可以进一步思考并在媒体查询条件本身中使用自定义属性，但不幸的是这不起作用。（见这个答案）

/* not working */
:root {
  --repeat: auto-fit;
  --max-columns: 3;
  --max-column-width: 250px;
}
/* Will not work: var is not allowed in media query condition */
@media (min-width: calc(var(--max-column-width) * var(--max-columns))) {
  :root {
    --repeat: var(--max-columns);
  }
}

Answer 2

只需为容器添加一个最大宽度。

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
max-width: 1280px;