Advanced CSS Grid Techniques
Published on by Jane Doe
Why Use CSS Grid?
CSS Grid provides a two‑dimensional layout system that makes complex designs easier to implement and maintain. Beyond simple rows and columns, you can create overlapping areas, sub‑grids, and dynamic responsive layouts.
Named Grid Lines & Areas
Giving your grid lines meaningful names can make the CSS far more readable.
.gallery{
display:grid;
grid-template-columns:
[start] 1fr [content-start] 2fr [content-end] 1fr [end];
grid-template-rows:
[header-start] 100px [header-end content-start] 1fr [content-end footer-start] 80px [footer-end];
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
}
header{grid-area:header;}
aside{grid-area:sidebar;}
main{grid-area:content;}
footer{grid-area:footer;}Sub‑Grids
Sub‑grids let child elements inherit the grid definition of the parent, enabling consistent alignment across components.
.card-list{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
gap:1rem;
}
.card{
display:subgrid;
grid-template-columns:subgrid;
gap:inherit;
}
.card img{grid-column:1;}
.card h3{grid-column:2;}
Complex Responsive Layouts
Combine minmax() with auto-fit to create fluid galleries that adapt to any viewport.
.responsive-gallery{
display:grid;
grid-template-columns:
repeat(auto-fit, minmax(200px, 1fr));
gap:1rem;
}
.responsive-gallery > div{
background:#e9ecef;
padding:2rem;
border-radius:4px;
}
Live Demo
Item 1
Item 2
Item 3
Item 4
Item 5