CSS Grid Mastery: Building Complex Layouts

Learn how to create complex, responsive layouts using CSS Grid's powerful features.

Basic Grid Layout

Create a simple grid:

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

.grid-item {
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
}

Grid Areas

Use named grid areas:

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 250px 1fr 1fr;
  gap: 20px;
}

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

Responsive Grid

Create a responsive grid:

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

@media (max-width: 768px) {
  .responsive-grid {
    grid-template-columns: 1fr;
  }
}

Grid Alignment

Control item alignment:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  
  /* Align grid items */
  justify-items: center;
  align-items: center;
  
  /* Align entire grid */
  justify-content: center;
  align-content: center;
}

.grid-item {
  /* Individual item alignment */
  justify-self: start;
  align-self: start;
}

Complex Layout Example

Create a complex magazine-style layout:

.magazine-layout {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, minmax(150px, auto));
  gap: 20px;
}

.featured {
  grid-column: span 4;
  grid-row: span 2;
}

.sidebar {
  grid-column: 5 / -1;
  grid-row: 1 / 3;
}

.article {
  grid-column: span 2;
}

@media (max-width: 768px) {
  .magazine-layout {
    grid-template-columns: 1fr;
  }
  
  .featured,
  .sidebar,
  .article {
    grid-column: 1;
    grid-row: auto;
  }
}

Grid with Overlapping Elements

Create overlapping layouts:

.overlap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 200px);
}

.overlap-item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  z-index: 1;
}

.overlap-item-2 {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  z-index: 2;
}

Best Practices

1. Use semantic HTML
2. Plan your layout structure
3. Consider responsive breakpoints
4. Use grid areas for complex layouts
5. Implement proper fallbacks
6. Test across browsers
7. Optimize for performance

Conclusion

CSS Grid is a powerful tool for creating complex layouts. Start with the basics and gradually build up to more complex implementations as you become comfortable with the system.