CSS block preview sample

Primary Action
Input Surface
Subtle Surface

Token and spacing effects appear here.

.magazine {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 120px;
  gap: 1rem;
}

.feature   { grid-column: span 4; grid-row: span 3; }
.secondary { grid-column: span 2; grid-row: span 2; }
.tertiary  { grid-column: span 2; grid-row: span 1; }
.wide      { grid-column: span 6; grid-row: span 1; }