Advanced Grid Techniques
Master advanced Grid features - item placement with span and line numbers, alignment within cells, and combining Grid with Flexbox for the ultimate layout toolkit.
Advanced Features
- grid-column: span 2 - Item spans 2 columns. grid-row: span 2 = spans 2 rows
- grid-column: 1 / 3 - Item starts at line 1, ends at line 3 (spans 2 columns)
- grid-column: 1 / -1 - Spans the entire row (1 to last line). Great for full-width headers
- place-items: center - Centers ALL items in their cells (justify-items + align-items shorthand)
- place-self: center - Centers a SINGLE item in its cell
- Grid + Flexbox - Use Grid for page layout, Flexbox for component internals. They work perfectly together
- clamp() with Grid - grid-template-columns: clamp(200px, 25%, 300px) 1fr. Responsive columns with constraints
Advanced Grid Code
/* Magazine layout with spanning */
.magazine {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
gap: 16px;
}
.magazine .featured {
grid-column: span 2;
grid-row: span 2; /* Takes 4 cells (2×2) */
}
.magazine .wide {
grid-column: span 2; /* Takes 2 cells horizontally */
}
/* Full-bleed header */
.page-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.full-width {
grid-column: 1 / -1; /* Spans entire row */
}
/* Grid for layout + Flexbox for cards */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}
.card {
display: flex; /* Flexbox for card internals */
flex-direction: column;
}
.card-body { flex: 1; } /* Pushes footer down */Tip
grid-column: 1 / -1 is the most useful placement shortcut - it spans the full row regardless of how many columns the grid has. Use it for section headings, banners, and full-width CTA sections inside a multi-column grid without hardcoding the column count.
Grid handles two-dimensional layouts - rows AND columns simultaneously
Common Mistake
Trying to use Grid for everything, including simple one-dimensional layouts. A navbar or a row of buttons doesn't need Grid - Flexbox is simpler and more appropriate. Use Grid when you genuinely need two-dimensional control (rows AND columns simultaneously).
Practice Task
Build a magazine layout: (1) 4-column grid with grid-auto-rows: 200px, (2) Make the first article span 2 columns AND 2 rows with grid-column: span 2 + grid-row: span 2, (3) Add a full-width banner using grid-column: 1 / -1. Experiment with different span values.
Quick Quiz
Key Takeaways
- Master advanced Grid features - item placement with span and line numbers, alignment within cells, and combining Grid with Flexbox for the ultimate layout toolkit.
- grid-column: span 2 - Item spans 2 columns. grid-row: span 2 = spans 2 rows
- grid-column: 1 / 3 - Item starts at line 1, ends at line 3 (spans 2 columns)
- grid-column: 1 / -1 - Spans the entire row (1 to last line). Great for full-width headers