@IvanRu08

Как разобраться с CSS Grid?

Понадобилось при верстке использовать CSS grid. Уже 3 дня пытаюсь въехать в тему, но не дается и все тут. Какие-то вещи понимаю, но сам принцип от меня ускользает. Есть вот такой блок:

5ebc47b81df07189113805.png

На средних экранах он должен превращаться вот в такой (верхние 2 блока занимают по строке):

5ebc4849291e5283825273.png

Ну и так далее. Из вводных: минимальная ширина колонка 280px, высота по контенту, количество строк понятное дело не известно. Как это сверстать это на гридах, не прописывая стили для каждого блока?

Пробовал для грид контейнера прописать вот так:

grid-template-columns: repeat(4, minmax(280px, 1fr))
grid-template-rows: repeat(auto-fill, minmax(220px, 1fr))


Допустим кол-во строк я могу менять медиа запросами, но количество строк я все равно не знаю. А таким макаром минимальная ширина срабатывает почему то только для 1 строки.
  • Вопрос задан
  • 414 просмотров
Решения вопроса 2
hzzzzl
@hzzzzl
прямо точно НУЖНО грид?
такое намного проще на флексах и flex-basis поменять с 50% на 100% для верхних и с 25% на 50% для нижних

но вот на гридах, свойство grid-column: ....span
Ответ написан
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Держите, проще некуда https://jsfiddle.net/2bjpfqu8/
код


<div class="block">
  <div class="item item--big"></div>
  <div class="item item--big"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>


.block {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;
  width: 80%;
  margin: 20px auto;
}

.item {
  background: deepskyblue;
  height: 50px;
}

@media (min-width: 400px) {
  .block {
    grid-template-columns: repeat(2, 1fr);
  }

  .item--big {
    grid-column: span 2;
  }
}

@media (min-width: 768px) {
  .block {
    grid-template-columns: repeat(4, 1fr);
  }
}

Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
sharnirio
@sharnirio
Front-end developer
Если все таки хотите разобраться как это работает, можете пройти эту интерактивную мини игру по grid - link
Ответ написан
Ваш ответ на вопрос

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

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