RWD Templates

RWD Templates

Responsive templates are reusable layout patterns (landing page, documentation layout, blog layout, admin layout). A good template stacks on mobile and becomes multi-column on desktop.

Template: Sidebar Layout

On mobile, sidebar and content stack. On desktop, they become 2 columns.

.page {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 992px) {
  .page {
    grid-template-columns: 280px 1fr;
  }
}

Template: Card Grid

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

Summary

• Templates are reusable responsive layout patterns.
• Use Grid for two-column layouts and card grids.
• Use breakpoints to switch from stacked to multi-column layouts.