Как расположить блоки?

Question

[Grizar]

Я имею



Как мне блок 3 расположить под блоком 1, а блок 2 рядом с ними.

чтоб пролучилось так

Comments

[Ankhena]

флексами или гридами
https://jsfiddle.net/j32z6vtc/

[Grizar]

Ankhena, не совсемм, блок 3 получается на высоте блока 2 , а мне бы сразу под блоком 1, т.к. у всех блоков высота разная, но всеравно спасибо, я и не знал о таком, пригодится все равно...

[Ankhena]

Grizar, объедините области грида для 2 блока. Задайте разную высоту строкам грида или по контенту.
Обучающая игра по гридам https://cssgridgarden.com/#ru
Читать, изучать https://yoksel.github.io/grid-cheatsheet/
и полно других статей

[polxz]

.sad:not(.se) {
  
  border: 2px solid #333;
  //width: 50px;
  height: 50px;
  //margin: 10px;
  padding: 10px;

}

.se {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 160px;
}

можно попробовать что-то такое

[Ankhena]

polxz, вы супер умеете выдергивать код из чужого ответа!

[Фархад Агамогланов]

Гриды конечно хорошо, но они поддерживаются не всеми браузерами.

Answer 1

[Фархад Агамогланов]

.sad {
    border: 2px solid #333;
    width: 50px;
    height: 50px;
    margin: 10px;
    padding: 10px;
}
.se {
  width: fit-content;
  height: fit-content;
  display: flex;
  flex-wrap: wrap;
  max-width: 190px;
}