Как правильно расположить блоки через grid-area?

Question

[lenniqq]

песочница
Как можно сместить второй ряд на одну ячейку влево, делаю через grid-area тоже не выходит, может где то не доучил

Comments

[Антон Антон]

Есть картинка, как должно быть?

[lenniqq]

Антон Антон,

[Ankhena]

Начать бы с подсчета колонок. Узнать, что их 4 (по крайней мере).
Дальше осознать, что 1 и 5 блоки занимают по 2 колонки.

Задать им span 2. Это если вы не знаете сколько будет элементов.
Если знаете, то можно и через area, только писать больше.

"a a b c"
"d e e f";

Answer 1

[Михаил Ливач]

Answer 2

[Антон Антон]

grid-template-areas: 
    "a a b c"
    "d e e f";

но вообще многовато лишнего, например grid-template-rows и -columns не нужны, если размеры жестко зашиты и есть areas
или если с ними, то достаточно grid-column: span 2 / span 2; на соответствующие ячейки: https://play.tailwindcss.com/TFCFv701GP