如何指定使用自动适应/填充创建的最大列数重复（）？ [复制]

Posted 2023-03-06

【中文标题】如何指定使用自动适应/填充创建的最大列数重复（）？ [复制]

【英文标题】：How to specify the maximum number of columns repeat() will create using auto-fit/fill? [duplicate]

【发布时间】：2019-07-21 06:44:45

【问题描述】：

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

例如：

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 次，并且仍然使用重复和自动适应/填充？

更新：这不是重复的：How to limit the amount of columns in larger viewports with CSS Grid and auto-fill/fit?

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

【问题讨论】：

你为什么觉得这感觉不对？我个人对此没有负面情绪

@yunzen 我想弄清楚是否有像“repeat-until(3, auto-fit, minmax())”这样优雅的东西可以让我的网格限制列数，但是仍然有响应。

@IvanS95 没有重复。 Ted 已经在他的 OP 中使用了答案代码

【参考方案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;
  

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

/* 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);
  

【讨论】：

但是仍然定义了一个媒体查询。顺便说一句，您可以删除第一个声明，因为您已经定义了 CSS 变量的默认值

对于媒体查询也需要考虑gap，所以应该是3*size + gaps

使用媒体查询，但以我喜欢的方式：使用变量而不是规则。优雅的解决方案。谢谢！

更新：我一直在使用这种技术，而且我的样式表现在更易于维护。我从来没有意识到媒体查询和变量配对得有多好。再次感谢。

@Dejan.S：我不支持旧版浏览器。

【参考方案2】：

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

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

【讨论】：

通过这样做，您将在最后一项之后获得一个空白空间，而不是所有列都拉伸到全宽

对我来说足够了 ;-)

比菲。您可以通过将 margin: auto 添加到网格容器来解决此问题。

@Beejee 你可以使用“align-content”和“justify-content”来解决这个问题，就像在 flex-box 上一样。