Common Grid Patterns

Auto-fit responsive grid

No media query needed — columns wrap automatically as the viewport shrinks.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

Named grid areas

grid-template-areas reads like an ASCII diagram of the page.

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
}
.sidebar { grid-area: sidebar; }
.header  { grid-area: header; }
.main    { grid-area: main; }

Grid vs Flexbox

Use Grid for two-dimensional page layout (rows AND columns); use Flexbox for one-dimensional arrangement (a single row or column of items). They combine well together.