CSS Grid Mastery

CSS Grid revolutionized web layouts. Learn how to create sophisticated designs with minimal code.

Grid Basics

Create a simple grid:

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

Grid Template Areas

Name your grid areas for semantic layouts:

.layout {
  display: grid;
  grid-template-areas:
    'header header header'
    'sidebar main aside'
    'footer footer footer';
}

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

Responsive Grids

Use auto-fit and minmax for responsive layouts:

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

Grid Alignment

Control item alignment:

.container {
  justify-items: center;
  align-items: center;
  place-items: center; /* Shorthand */
}

Advanced Patterns

Create complex layouts:

.mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 100px;
}

.item-large {
  grid-column: span 2;
  grid-row: span 2;
}

Conclusion

CSS Grid is a powerful tool that makes complex layouts simple and maintainable.