Задать вопрос
SuperToster
@SuperToster
html

Двухколоночный макет из одного контейнера — утопия или нет?

Всем привет!

Вот такая утопия:

<div class="grid">
  <div class="grid__item">
   1.
  </div>
  <div class="grid__item">
   2.
  </div>
  <div class="grid__item">
   3.
  </div>
  <div class="grid__item">
   4.
  </div>
</div>

5ae1e4d11f2e5348250563.png5ae1e4d67b156711309978.png
Для Flex оказалось неподъемно (в рамках моих познаний). С Grid удалось слепить похожее, но не удаётся обойтись без js.
  • Вопрос задан
  • 266 просмотров
6 комментариев
Подписаться 1 Средний 6 комментариев
Пригласить эксперта
Ответы на вопрос 1
galkan
@galkan
Для grid вполне реально:
.grid {
display: grid;
height: 100vh;
grid-template-columns: 3rf 1fr;
grid-template-rows: auto auto 1fr;
grid-gap: 15px;
}
.grid__item {
background-color: #fcc;
}
.grid__item:nth-child(1) {
grid-area: 1 / 1 / 4 / 2;
}
.grid__item:nth-child(2),
.grid__item:nth-child(3),
.grid__item:nth-child(4) {
grid-column: 2;
}
https://codepen.io/galkinhtml/pen/ZoBpKW
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Спарсить ссылки на все товары конкретного продавца в озон
18 апр. 2024, в 20:13
2000 руб./за проект
Устранить проблемы с парсерами и отображением новостей
18 апр. 2024, в 20:08
7000 руб./за проект
Установить Windows и терминалы RDP на Dedicated Server (без лицензии)
18 апр. 2024, в 20:07
2000 руб./за проект
Ещё заказы