Как реализовать данный блок через гриды?

Question

[tkachenkoaanna097]

Answer 1

[Softlink]

Через areas

Comments

[tkachenkoaanna097]

Softlink. спасибо.
а если еще вдруг блоки добавятся ? не совсем понимаю
https://jsfiddle.net/2an4uhwj/

[Softlink]

tkachenkoaanna097, сетка из задачи заложена в grid-template-areas и в каждом конкретном grid-area. Если следующие блоки не будут размечены в areas, то будут просто идти один за другим. Так это работает.

[tkachenkoaanna097]

Softlink, это поняла
а тут это нормальное поведение?
https://jsfiddle.net/yf92bgmx/

[Softlink]

tkachenkoaanna097, тут ожидаемое поведение. Вы продублировали блоки, а браузер согласно схеме наложил их друг на друга.

Answer 2

[Сергей delphinpro]

Comments

[tkachenkoaanna097]

Сергей delphinpro, спасибо.
а если еще вдруг блоки добавятся ? не совсем понимаю

добавляю блоки - вроде не корректно отображаются

[tkachenkoaanna097]

Сергей delphinpro , https://jsfiddle.net/fypuj87m/

Answer 3

[ReActor Дмитрий Вершанский]

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

В grid существует понятие области - "areas". Благодаря им Ваша задача выполняется.