поведение minmax, гибкая сетка css - PullRequest
Новая
       11

поведение minmax, гибкая сетка css

0 голосов
/ 14 мая 2019

В настоящее время используется grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));

Ведет себя следующим образом: если в строке больше элементов, чем умещается (исходя из минимума), создаются новые строки. Если элементов меньше, чем может занять строка, эти элементы расширяются, чтобы заполнить оставшееся пространство.

Но что, если вы не хотите, чтобы они занимали пространство, но имели максимальный размер? Установка типа max-width элемента решает проблему, но затем распределяет элементы по контейнеру. Вместо того, чтобы заполнять пространство или располагаться через контейнер, я бы хотел, чтобы элементы имели максимальный размер и располагались рядом друг с другом, если сетка шире, чем общее количество элементов.

Возможно ли такое поведение?

Фрагмент, показывающий сетку> всего элементов 

html {
  font-size: 62.5%;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  grid-template-rows: repeat(2, 20rem);
  grid-gap: 1rem;
  
  border: 1px solid lightgrey;
  padding: 1rem;
}

.item {
  background: lightblue;
  // max-width: 35rem;  
}
<div class="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
</div>

1 Ответ

1 голос
/ 14 мая 2019

Вы должны использовать auto-fill вместо auto-fit.Разница в том, что auto-fill заполняет строку как можно большим количеством столбцов, а auto-fit расширяет столбцы, чтобы разместить их в доступном пространстве.

Я создал этот jsfiddle с помощьюрешение. 

grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
...