Логические свойства CSS и subgrid — Subgrid в CSS Grid

.page {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.card {
  grid-column: span 4;
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 4; /* занимает 4 колонки родителя */
}

.card__header,
.card__body,
.card__footer {
  grid-column: 1 / -1; /* на всю ширину subgrid */
}