Как указать максимальное количество столбцов, которые 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 Grid и автозаполнения / подгонки?

Я спрашиваю, как сделать так, чтобы код для области просмотра также работал для меньших областей просмотра.Упомянутый выше вопрос (и ответ) только подходит к исходной точке моего вопроса.

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>

Замечание

Запрашивающий хотел в своем ОП найти решение, которое бы не использовало медиазапросы.Это решение использует медиа-запросы, но несколько другим способом.Единственное, что изменяется в медиа-запросе, это значение пользовательского свойства CSS.

Мы могли бы даже использовать «глобальное» пользовательское свойство с селектором :root

: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

Jest добавляет максимальную ширину контейнера.

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

Answer 3

Я думаю, вам повезет больше, если учесть 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>