Understanding CSS Grid

CSS Grid is a powerful layout system. Let's explore the basics with an interactive demo.

Interactive Demo

Try adjusting the columns and gap to see how CSS Grid works:

grid-template-columns: repeat(3, 1fr);
gap: 10px;

The Grid Container

To create a grid, set display: grid on the parent:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

This creates 3 equal columns with 20px gaps.

Grid Template Areas

You can name areas for easier placement:

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

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

Responsive Grids

Use auto-fit and minmax for responsive layouts:

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

This automatically creates as many columns as can fit, with a minimum width of 250px.

Conclusion

CSS Grid makes complex layouts simple. Combined with Flexbox, you have all the tools needed for modern web layouts.