Задать вопрос
andead
@andead
друпал девелопер, фрилансер

Как установить максимальную ширину элемента в галерее на гридах?

Есть простая галерея на гридах:

<div class="gallery">
  <div class="gallery__item">item</div>
  <div class="gallery__item">item</div>
  <div class="gallery__item">item</div>
  <div class="gallery__item">item</div>
  <div class="gallery__item">item</div>
</div>


.gallery {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}


https://jsfiddle.net/xandeadx/4dy1trxg/4/

Здесь минимальная ширина колонки 250px, а максимальная чуть больше 500px. Как задать максимальную ширину колонки например 300px? Если указать max-width для .gallery_item, то в галерее образуются дыры больше grid-gap:

5da89b5203586285953412.png

А хочется так:

5da89b86c6b47701904859.png

@media не предлагать.
  • Вопрос задан
  • 587 просмотров
Подписаться 1 Простой Комментировать
Решения вопроса 1
andead
@andead Автор вопроса
друпал девелопер, фрилансер
Решение

.gallery {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(250px, max-content));
}
.gallery__item {
  width: 300px;
  max-width: 100%;
}


https://codepen.io/xxandeadxx/pen/qBYMrMa
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@xversus
grid-template-columns: repeat(auto-fill, minmax(250px, 300px));
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы