Как сделать такую сетку?

Question

Breeze1 @Breeze1

CSS
CSS Grid

Как сделать такую сетку?

Добрый вечер, подскажите, реально ли сделать сетку в одном родители, не разбивая на колонки вот такую сетку ?

Только чтобы элементы из левой колонки подтягивались вверх к первому блоку ? Высота блоков может быть разной

codepen пример

http://codepen.io/breeze8/pen/RNNJaPV

Вопрос задан 9 часов назад
63 просмотра

2 комментария

Подписаться 1 Простой 2 комментария

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

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

Похожие вопросы

HTML

+1 ещё

Простой
Различие скелета в пк версии и телефонной, как лучше всего делать такие вещи?
- 1 подписчик
- 02 мая
- 121 просмотр
0

ответов
JavaScript

+3 ещё

Простой
Проблема с WordPress как исправить ошибку?
- 2 подписчика
- 01 мая
- 1282 просмотра
0

ответов
HTML

+1 ещё

Простой
Как зафиксировать кнопки в html?
- 1 подписчик
- 30 апр.
- 126 просмотров
1

ответ
CSS

Простой
Как сделать анимацию разворачивающегося сразу в две стороны свитка с информацией?
- 2 подписчика
- 30 апр.
- 510 просмотров
0

ответов
JavaScript

+3 ещё

Средний
Почему не подключается css файл в Webpack?
- 1 подписчик
- 29 апр.
- 104 просмотра
2

ответа
CSS

Простой
Как в CSS остановить одну анимацию и сразу запустить вторую для одного элемента?
- 2 подписчика
- 28 апр.
- 443 просмотра
1

ответ
CSS

+1 ещё

Простой
Как сделать грид контейнер в коде?
- 1 подписчик
- 28 апр.
- 89 просмотров
1

ответ
HTML

+1 ещё

Простой
Как можно во flex сетке закрасить отступы gap?
- 2 подписчика
- 27 апр.
- 1536 просмотров
3

ответа
CSS

+1 ещё

Простой
Как прижать элемент div class bl вниз Boostrap 5?
- 1 подписчик
- 22 апр.
- 127 просмотров
1

ответ
Показать ещё Загружается…

Web-программист (Bitrix) / PHP, CSS, JS (Fullstack)

OX8.RU

от 70 000 до 150 000 ₽

Senior Frontend (JavaScript) разработчик

Vital Partners

от 350 000 до 400 000 ₽

Frontend разработчик

AMarkets • Москва

от 2 000 $

с гридами хз как, без них можно как-то так
column-count: 2; контейнеру и break-inside: avoid; элементам.
Но при этом порядок элементов будет вертикальный, а не горизонтальный.

spoiler
Если высота ячеек одинаковая, то нет проблем, т.е. если нужен просто сдвиг одного столбца относительно другого.
Если высота неизвестна, то либо css columns либо скрипты семейства masonry.
Либо долго-долго ждать нативную masonry раскладку.

Answer 1 · 2025-05-06 18:36:31

либо как-то так http://codepen.io/FragsterAt/pen/QwwxEMj
либо, если высота блоков должна быть независима, гуглить масонри, columns и прочее, гридом такое не сделать.

Как сделать такую сетку?

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

Минуточку внимания

Войдите на сайт