1

Почему элементы не сужаются? А перескакивают сразу не дойдя до свей минимальной ширины? https://jsfiddle.net/baar6uoj/

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 200px));
  grid-gap: 20px;
}

.grid div {
  background-color: #28314E;
  border: 1px solid #212941;
  border-radius: 5px;
  padding: 8px 15px;
  color: #ffffff;
  font-size: 18px;
  font-family: roboto;
}

.grid div:nth-child(odd) {
  background-color: #475477;
}
<div class="grid">
  <div>item-1</div>
  <div>item-2</div>
  <div>item-3</div>
  <div>item-4</div>
</div>

1 ответ 1

2

Дело в том, что это и есть нормальная работа функции minmax, которую вы наблюдаете. Я тоже был удивлён сперва, но это просто так она создана, такова задумка создателей.

Как работает функция minmax?

Cперва пробуется примениться "максимальный" размер. И только если "минимум" в пикселях будет больше "максимума", то применяется "минимальный". Но всегда по умолчанию применяется "максимум". Поэтому эта функция хороша в комбинации гибких единиц и фиксированных (в данном случае — переменного количества колонок). К примеру minmax(100px, 1fr).

Как срабатывает mimmax в данном примере?

Всё-таки колонки сужаются. Только в случае если доступная ширина контейнера меньше 200px.

А до достижения этого условия, элементы без проблем переносятся на новые строки совершенно не уменьшаясь. Поскольку для применения "максимума" нет никаких проблем, то колонки не сужаются, а переносятся. Всё дело в том, что по умолчанию применяется максимум, а минимум в данном случае не будет применяться, так как для его достижения нужно, чтобы он был больше в пискелях, чем максимум, а этого не происходит, так как 100px всегда будут меньше 200px.

5
  • Ага, понял. Типа Если есть возможность сделать ширину "максимальной", но браузер это сделает всеми способами в моём случае путём переноса строки 16 апр 2018 в 16:55
  • И только если "минимум" в пикселях будет больше "максимума", то применяется "минимальный" Это как??? 16 апр 2018 в 17:59
  • 1
    @АртёмPeGaS Это наглядно проявляется, к примеру, в гибких единицах и фиксированных единицах. К примеру, для значения minmax(200px, 1fr) строка будет занимать всё оставшееся место, но не меньше 200px. 16 апр 2018 в 18:04
  • @АртёмPeGaS Так понятно? 16 апр 2018 в 18:06
  • Я по этому оперирую "Если есть возможность сделать ширину "максимальной", но браузер это сделает" 16 апр 2018 в 18:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.