@Soolberns

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

6331a90774d2b532607571.png
  • Вопрос задан
  • 84 просмотра
Решения вопроса 2
mizutsune
@mizutsune
Frontend Developer
<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;    
}
Ответ написан
Комментировать
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Грид: две колонки, два столбца.
Что именно у вас не получилось?

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

Родителю
grid-template-columns: repeat(2, 1fr);
Большому дочернему:
grid-row: span 2;
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы