Как сверстать такую сетку?

Question

[Барбарис]

Как сделать на flex или скорее на grid такую схему, желательно кроссплатформенную? Высота разная, можно фикс-высоту для каждого блока.

<div class="container">
  <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>

.container {
  display: flex;
  height: 650px;
   /* Optional */
  background-color: #f7f7f7;
  border-radius: 3px;
  padding: 20px;
  width: 100%;
  margin: 40px auto;
}

.item {
width: 32%;
  border-radius: 3px;
  background-color: #a1cbfa;
  border: 1px solid #4290e2;
}

Comments

[Ankhena]

Грид.
6 строчек, 3 столбца.
Всё.

Где ваш код и что не получилось?

[Барбарис]

Ankhena,

<div class="container">
  <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>

[Ankhena]

Барбарис, флексами много неудобств:
1. Вам придется задавать фикс высоту контейнеру.
2. Не удобно считать отступы. Вы задаете margin-bottom 2%, но процент при этом считается от ширины родителя

Если дорабатывать флексами, то нужно просто задать высоту дочерним. Типа 50% и 33%, только с учетом отсупов.

=> гридами проще.

https://jsfiddle.net/b51qvpL6/
тут строки все одного размера, отредактируйте как нужно

[Барбарис]

Ankhena, оо, благодарствую старик!
интересно в осле будет работать!?

[Ankhena]

Барбарис, а вот это было обидно

интересно в осле будет работать!?

В таком виде нет.
Нужно явно прописывать grid-row-start и -end

Answer 1

[Дмитрий Николаев]

https://codepen.io/dmitriy-nikoalev/pen/RwaROpd