Building Responsive Layouts with CSS Grid

CSS Grid has revolutionized how we build layouts on the web. Let’s explore how to create responsive designs that adapt to any screen size.

The Basics

CSS Grid allows you to create two-dimensional layouts with rows and columns:

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

Responsive Grids

Use auto-fit or auto-fill with minmax() for truly responsive grids:

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

This creates a grid that automatically adjusts the number of columns based on available space.

Grid Areas

Named grid areas make complex layouts easier to understand:

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  gap: 1rem;
}

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

Mobile-First Approach

Start with a single column layout and add complexity for larger screens:

.container {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}

Conclusion

CSS Grid provides powerful tools for creating responsive layouts. Combined with a mobile-first approach, you can build designs that work beautifully on any device.