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

Question

[IvanRu08]

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



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



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

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

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

Допустим кол-во строк я могу менять медиа запросами, но количество строк я все равно не знаю. А таким макаром минимальная ширина срабатывает почему то только для 1 строки.

Comments

[Андрей Федоров]

Сделайте 2 грида. Один для 2х верхних блоков, другой для остальных маленьких.

Answer 1

[hzzzzl]

прямо точно НУЖНО грид?
такое намного проще на флексах и flex-basis поменять с 50% на 100% для верхних и с 25% на 50% для нижних

но вот на гридах, свойство grid-column: ....span

Comments

[IvanRu08]

Нужен. Это еще простой блок, здесь можно и без гридов обойтись. Я думал на этом блоке будет проще понять сам принцип. А следующий блок у меня вот такой:

Подобное на флексах насколько я знаю сделать нельзя

[hzzzzl]

IvanRu08, ну если каждый "ряд" обернуть в свой флекс, то вполне легко сделать

[IvanRu08]

не понимаю, можете пример набросать на флексах? Если разделить этот блок на 2 больших ряда, то в каждом еще 2 внутренних получается...

[hzzzzl]

IvanRu08, наверняка можно поизящнее сделать, но сейчас не соображается

Answer 2

[Ankhena]

Держите, проще некуда 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);
  }
}

Answer 3

[Vyach Gor]

Если все таки хотите разобраться как это работает, можете пройти эту интерактивную мини игру по grid - link

Comments

[IvanRu08]

Спасибо за игру отвлекся, хотя задумался я только на 26 вроде задании, остальное прошел без проблем. То есть как размещать элементы в сетке я неплохо понимаю.

Но есть 2 вопроса. При верстке такого блока:

При адаптации мы не знаем же количество строк. Знаем только их максимальную/минимальную высоту (в моем случае знаем). Как сделать, чтобы строки в сетки сами создавались и не нужно было писать количество строк?

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

[Vyach Gor]

Навскидку накидал что то такое - но сразу скажу если больше 8 блоков то идет все не так как надо, там надо посидеть еще с nth-of-type поколдавать