Как расположить блоки с контентом таким образом?

Question

[Soolberns]

Answer 1

[Dino Winchester]

<div class="container">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>

.container {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 10px;  
    grid-template-areas: 
      "A B"
      "A C";
}

.card:nth-child(1) {
    grid-area: A;
}

.card:nth-child(2) {
    grid-area: B;
}

.card:nth-child(3) {
    grid-area: C;
}

Или:

.container{
    display: grid;
    grid-gap: 10px;  
    grid-template-columns: repeat(2, 1fr);
}

.card:nth-child(1) {
    grid-row: 1 / span 2;    
}

Answer 2

[Ankhena]

Грид: две колонки, два столбца.
Что именно у вас не получилось?

Довольно быстрый способ познакомится с гридами это пройти игру на полчасика: https://cssgridgarden.com/#ru

Родителю
grid-template-columns: repeat(2, 1fr);
Большому дочернему:
grid-row: span 2;

Comments

[Soolberns]

Не знаю как это сделать

[Ankhena]

Soolberns, довольно быстрый способ познакомится с гридами это пройти игру на полчасика: https://cssgridgarden.com/#ru

Родителю
grid-template-columns: repeat(2, 1fr);
Большому дочернему:
grid-row: span 2;

[Soolberns]

Ankhena, Спасибо вам огромное! выручили.