如何指定使用自动拟合/填充将创建的最大列数repeat（）？ [英] How to specify the maximum number of columns repeat() will create using auto-fit/fill?

问题描述

是否可以不使用媒体查询来限制要创建的列数，并将其与自动调整/填充功能结合起来？

Is there a way, without using media query, to limit the number of columns that get created, and combine that with auto-fit/fill?

例如：

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

创建精美的响应式布局。但是请想象一下，即使在宽浏览器中，设计最多也需要3列。如果空间允许，它会很高兴地显示4、5列。

Creates a wonderful, responsive layout. But imagine the design calls for a maximum of 3 columns -- even in wide browsers. It would happily show, 4, 5, more columns as space allows.

使用媒体查询，我可以指定大屏幕显示：

Using media query, I could specify big screens get:

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

较小的屏幕会得到：

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

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

But that feels wrong. Is there a way to tell my grid layout to repeat up to a maximum of n times, and still use repeat and auto-fit/fill?

更新：这不是如何使用CSS Grid和自动填充/调整功能来限制较大视口中的列数？

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

I am asking how to make the code for the viewport also work for smaller viewports. The question (and answer) referenced above only gets to the starting point of my question.

推荐答案

CSS自定义属性（ 'CSS变量'）抢救

CSS custom properties ('CSS variables') to the rescue

.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自定义属性的值。

The asker wanted in his OP a solution which would not use media queries. This solution does use media queries, but in a somewhat different way. The only thing that is changed in the media query is the value of a CSS custom property.

我们甚至可以对：root使用'global'自定义属性选择器

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

人们可以再考虑一下，并在媒体查询条件本身中使用自定义属性，

One could think further and use custom properties in the media query condition itself, but unfortunately this does not work.

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

这篇关于如何指定使用自动拟合/填充将创建的最大列数repeat（）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！