Управляй отступами и колонками вложенных элементов без копирования шаблона сетки!

Когда сетка большая, внутренние элементы часто должны идеально выровняться по внешней стороне.

.inner наследует колонки и их размеры от родительской сетки:
.inner {
display: grid;
grid-template-columns: subgrid;
}

Чтобы наследовать и отступы:
.inner {
grid-column: 1 / -1;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}

Все вложенные блоки автоматически выравниваются по внешней сетке, как будто это одна общая структура.

Чтобы заголовок или текст “защелкнулся” в ту же колонку, что и картинка родителя:
.title {
grid-column: span 2;
}

Всё работает, как по линейке, даже если меняете размеры в одном месте.

Code Ready | #совет