Как сверстать такой блок на grid?

Question

[Shimpanze]

Здравствуйте!

Необходимо расположить блоки в таком порядке (третий блок сразу под первым). Высота всех блоков должна быть под контент в них, а не какой-то заданной.

Пример:



HTML-раскладка:

<div class="grid">
  <div class="item item1"><b>1</b><br>(под высоту содержимого)</div>
  <div class="item item2"><b>3</b><br>(под высоту содержимого)</div>
  <div class="item item3"><b>2</b><br>(под высоту содержимого)<br>Lorem ipsum.<br>Lorem ipsum.</div>
</div>

CSS:

.grid {
  display: grid;
}

.item1 {}

.item2 {}

.item3 {}

Если можно, прокомментируйте CSS - чтобы понять.

Большое спасибо!

Answer 1

[Ankhena]

Comments

[Shimpanze]

Извините, у меня перепутано немного «.item2» должен быть справа, а «.item3» сразу под «.item1».

То есть, результат как на картинке, а правильная разметка такая:

<div class="grid">
  <div class="item item1"><b>1</b><br>(под высоту содержимого)</div>
  <div class="item item2"><b>2</b><br>(под высоту содержимого)<br>Lorem ipsum.<br>Lorem ipsum.</div>
  <div class="item item3"><b>3</b><br>(под высоту содержимого)</div>
</div>

Помогите, пожалуйста.
Большое спасибо!

[Ankhena]

Shimpanze, Какая разница? Классы местами поменяйте.
https://jsfiddle.net/6q9aruLp/

Answer 2

[Артем]

Если не принципиально именно использование гридов - тут максимально подходит под описание Masonry https://masonry.desandro.com