CSS block preview sample

Primary Action
Input Surface
Subtle Surface

Token and spacing effects appear here.

.page {
  display: grid;
  grid-template:
    "header  header  header"  auto
    "sidebar main    aside"   1fr
    "footer  footer  footer"  auto
    / 220px  1fr     200px;
  min-height: 100vh;
  gap: 0;
}

header  { grid-area: header;  }
.sidebar{ grid-area: sidebar; }
main    { grid-area: main;    }
aside   { grid-area: aside;   }
footer  { grid-area: footer;  }

@media (max-width: 768px) {
  .page { grid-template:
    "header" auto "main" 1fr "footer" auto / 1fr; }
  .sidebar, aside { display: none; }
}