Столбцы шаблона сетки CSS повторяются не более X раз

Question

У меня есть макет, в котором несколько элементов будут выровнены в сетке. Давайте использовать следующее в качестве примера:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.grid-item {
  display: block;
  width: 100%;
  background-color: purple;
  color: white;
  text-align: center;
  padding: 30px 5px;
}

<div class="grid-container">
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
</div>

В приведенном выше коде сетка будет повторять 3 столбца на строку, и каждый элемент будет расширяться до 1/3 ширины строки. Проблема в том, что в отзывчивой ситуации сетка всегда будет повторять 3 столбца.

Если я изменю значение repeat на auto-fit и отрегулирую размер столбца, чтобы использовать minmax, я могу контролировать, как страница уменьшается, уменьшать ширину столбца и считать до некоторого нормального значения. Настроенный код будет выглядеть примерно так:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  grid-gap: 20px;
}

.grid-item {
  display: block;
  width: 100%;
  background-color: teal;
  color: white;
  text-align: center;
  padding: 30px 5px;
}

<div class="grid-container">
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
</div>

Это хорошо работает при уменьшении, но здесь у меня проблемы - я хочу ограничить количество столбцов на 3, когда страница масштабируется. В идеале я хотел бы использовать minmax в директиве repeat, например:

grid-template-columns: repeat( minmax(1, 3), minmax(300px, 1fr) );

но, конечно, это не работает. Как я могу ограничить повторение до 3 столбцов, сохраняя при этом мои настройки для уменьшения масштаба с помощью auto-fit?

Answer 1

Я не думаю, что вы можете установить максимальное количество столбцов, используя auto-fit или auto-fill. По определению они создадут столько треков, сколько могут поместиться в контейнере без переполнения:

& секта; 7.2.2.2. Повторите, чтобы заполнить: auto-fill и auto-fit повторы

Когда auto-fill [или auto-fit] указан в качестве номера повторения ... тогда количество повторений является максимально возможным положительным целое число, которое не вызывает переполнение сетки своим контейнером сетки.

И вы не можете установить значение max функции minmax() равным 30%, потому что тогда вы столкнетесь с той же проблемой, что и в первом примере:

grid-template-columns: repeat(3, 1fr)

А именно, дорожки столбцов становятся фиксированными на экранах всех размеров, а компоновка не отвечает.

Я понимаю, что вы ищете решение, которое не требует медиазапросов. Но если вы хотите использовать сетку, я думаю, что медиа-запросы могут быть лучшим выбором.

В противном случае рассмотрим гибкий макет:

jsFiddle demo

.grid-container {
  display: flex;
  flex-wrap: wrap;
}

.grid-item {
  width: 30%;
  min-width: 300px;
  flex-grow: 1;
  background-color: teal;
  color: white;
  text-align: center;
  padding: 30px 5px;
  border: 5px solid white;
}

* {
  box-sizing: border-box;
}

<div class="grid-container">
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
  <div class="grid-item">Item</div>
</div>

Если вы пойдете по гибкому маршруту, прочитайте и этот пост:

• Ориентация флекс-элементов в последнем ряду

Answer 2

если я правильно понимаю, что вы можете сделать, это установить медиа-запрос для больших экранов. Допустим, вы хотите показать сетку из 3 столбцов для экранов с разрешением более 992 пикселей и можете использовать что-то вроде этого

@media only screen and (min-width: 992px){
  .grid-container{
    grid-template-columns: repeat(3, 1fr);
  }
}

Дайте мне знать, если это поможет вам! проверить это здесь https://codepen.io/anon/pen/Krzbmz