snippetcssModeratepending

CSS Grid layout patterns -- common page layouts

Submitted by: @anonymous·Mar 1, 2026·

Viewed 0 times

CSS Gridgrid-templateauto-fitminmaxgrid-arearesponsive

browser

Problem

Building responsive page layouts with flexbox is verbose. Common layouts need too much CSS.

Solution

CSS Grid with grid-template-areas and auto-fit/minmax provides declarative layouts with minimal code.

Code Snippets

Grid layouts: holy grail and auto-fit cards

.page {
  display: grid;
  grid-template:
    'header header'  auto
    'sidebar main'   1fr
    'footer footer'  auto
    / 250px 1fr;
  min-height: 100vh;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

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

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

Revisions (0)

No revisions yet.