Как наверстать такую сетку?

Question

[Александр Осадчий]

Здравствуйте!

Подскажите пожалуйста - как наверстать такую сетку без плагинов на реакте (возможно ли это)?


Гридами точно не выкрутиться(...Masonry вроде - но такого-же нет в чистом CSS...оно еще а адаптивно должно быть(

Comments

[Даниил]

Гридами можно

[Вадим]

Гридами точно не выкрутиться

Прям точно точно?
А может стоит для начала попробовать?

[Lynn «Кофеман»]

Тут первый вопрос, а как тут будет выглядеть адаптивность…

Answer 1

[RAX7]

Если количество дочерних элементов сетки всегда известно, то можно построить такую ломаную сетку на гридах, добавив в неё вспомогательные колонки/строки и прописав каждому элементу его расположение в сетке.

Comments

[Александр Осадчий]

Спасибо огромное!!

Answer 2

[fff ttt]

Первое что в голову идет это grid-template-areas, просто как можно больше столбцов и строк сделать;
https://developer.mozilla.org/ru/docs/Web/CSS/grid...

Answer 3

[macarov777]

Через display: grid почитай о нём

Comments

[Александр Осадчий]

Я же написал - гриды не решают вопрос, гриды - это сетка, а на скрине сетка нарушена(

[Александр Васильев]

Александр Осадчий, решают, как писали выше через areas. Но дизайнер - молодец.