CSS Grid Techniques

March 15, 2025 css web dev front-end

CSS Grid Techniques

This is a growing collection of CSS grid techniques that I’m building over time. I’ll be adding more examples and explanations as I learn and experiment with CSS Grid.

If you’re looking to learn the easiest and most effective way to use CSS Grid, check out my every layout.

Basic Grid Layout

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

This creates a simple 3-column grid with equal width columns and 20px gaps between them.

Grid Areas

.container {
  display: grid;
  grid-template-areas:
    'header header header'
    'sidebar content content'
    'footer footer footer';
  grid-template-columns: 1fr 3fr 1fr;
  grid-gap: 10px;
}

.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.content {
  grid-area: content;
}
.footer {
  grid-area: footer;
}

This creates a layout with a header spanning all columns, a sidebar on the left, content in the middle and right, and a footer spanning all columns.