Modern CSS Grid Techniques

CSS Grid has revolutionized how we approach web layouts. In this post, we’ll explore advanced techniques that go beyond basic grid implementations.

Advanced Grid Areas

Named grid areas make complex layouts readable and maintainable:

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

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

Responsive Grids Without Media Queries

Use repeat() with auto-fit and minmax():

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

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

Grid Subgrid

When supported, subgrid allows nested grids to align with their parent:

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.child {
  display: grid;
  grid-column: span 2;
  grid-template-columns: subgrid;
}

Conclusion

CSS Grid continues to evolve, offering more powerful layout capabilities. These techniques help create maintainable, responsive designs with less code.