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

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

不重复

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

Answer 1

要解救的CSS自定义属性（“ CSS变量” ）

.grid {
  --repeat: auto-fit;
}
@media (min-width: calc(250 * 3px)) {
  .grid {
    --repeat: 3;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--repeat, auto-fit), minmax(calc(250 * 1px) , 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选择器中使用'global'自定义属性

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

可以走得更远，在媒体查询条件本身中使用自定义属性，但不幸的是，这行不通。

: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

我认为在这种情况下考虑使用flexbox会更好：

.container {
  display: flex;
  flex-wrap: wrap;
}

.container span {
  height: 50px;
  flex-basis: 30%; /*will define 3 columns*/
  flex-grow: 1; /*this will behave as 1fr*/
  margin: 5px;
  min-width: 250px; /*set a min-width to simulate auto-fit*/
  background: red;
}

/*to fix the last row and avoid having bigger element than previous rows*/
.container:before,
.container:after {
  content:"";
  order:2;
  height: 1px;
  margin: 5px;
  flex-grow: 1;
  flex-basis: 30%;
  min-width: 250px;
}

<div class="container">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Answer 3

只需向容器添加最大宽度。

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

如何指定使用自动调整/填充功能创建的最大重复数列？

3 个答案:

备注