sharomet
@sharomet
Front-End

Как сделать так, что-бы блок автоматически занимал нужное положение при разных разрешениях?

Всем привет.
У меня есть сетка 3 вряд. Первый элемент занимает 2 колонки. При уменьшении разрешения экрана колонки автоматически располагаются друг под друга так как у них задан параметр grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)). При этом первый элемент просто пропадает, это связано с параметром grid-column: span 2.
Как можно автоматизировать его расположение при разных разрешениях не используя media запросы?
CodePen
Пример того что должно получится:
5f86b30332086204314185.png
.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 1rem;
}
.product-list__banner {
  position: relative;
  grid-column: span 2;
}
.product-list__banner img {
  position: absolute;
  object-fit: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
}

Спасибо.
  • Вопрос задан
  • 93 просмотра
Решения вопроса 3
Судя по всему, это происходит потому что баннер имеет ширину в 2 колонки, поэтому до 1-й схлопнуться они не могут. Поэтому минимально такой грид всегда имеет 2 колонки, и при дальнейшем уменьшении ширины страницы уменьшаются уже сами ячейки грида.

https://codepen.io/yakimchuk/pen/MWeadLr?editors=0100
Если убрать спан на баннер, всё будет работать как ожидается, грид будет схлопываться до 1 колонки при уменьшении ширины страницы.
Ответ написан
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Пропадает он вовсе не из-за спан, а потому что у него нулевая высота, а у картинки object-fit.
Пока рядом есть элемент, этот блок по нему и растягивался.
Ответ написан
Kurokq
@Kurokq
Если б море было лином – я бы стал Comethazin'ом
этого хотел ?
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы