Modern CSS has introduced powerful layout features that solve longstanding design challenges. Subgrid allows nested grids to align with parent grid tracks, aspect-ratio maintains proportions without padding hacks, and gap properties provide consistent spacing in grid and flexbox layouts. These features eliminate workarounds, reduce code complexity, and enable layouts that were previously difficult or impossible with pure CSS.
Gap Properties
The gap property (and its longhand properties row-gap and column-gap) creates space between grid or flexbox items without adding margin to individual items.
Why Gap is Better Than Margin
- No margin on edges: Gap only adds space between items
- Cleaner code: One line instead of margin on every item
- Works with grid and flexbox: Universal spacing solution
- Responsive: Change gap at breakpoints easily
- No negative margins: No need for container margin hacks
/* Gap shorthand (row-gap column-gap) */
.grid {
display: grid;
gap: 2rem; /* Same gap for rows and columns */
gap: 2rem 3rem; /* 2rem rows, 3rem columns */
}
/* Longhand properties */
.grid {
row-gap: 2rem; /* Space between rows */
column-gap: 3rem; /* Space between columns */
}
/* Gap with flexbox */
.flex-container {
display: flex;
gap: 1rem; /* Space between flex items */
flex-wrap: wrap;
}
/* Gap with different units */
.grid {
gap: clamp(1rem, 2vw, 2rem); /* Responsive gap */
gap: calc(1rem + 1vw); /* Dynamic gap */
gap: var(--spacing-md); /* Using CSS variables */
}
/* Before gap (old way with margin) */
.old-grid {
display: grid;
margin: -1rem; /* Negative margin hack */
}
.old-grid > * {
margin: 1rem; /* Margin on every item */
}
/* After gap (modern way) */
.new-grid {
display: grid;
gap: 2rem; /* Clean, simple */
}Gap Properties Examples
Gap Properties
| Property | Values | Description |
|---|---|---|
gap | length or % | Shorthand for row-gap and column-gap |
row-gap | length or % | Space between rows |
column-gap | length or % | Space between columns |
aspect-ratio Property
The aspect-ratio property maintains an element's width-to-height ratio. It eliminates the padding-bottom hack for responsive images and videos.
/* Basic aspect ratio */
.element {
aspect-ratio: 16 / 9; /* 16:9 widescreen */
aspect-ratio: 4 / 3; /* 4:3 traditional */
aspect-ratio: 1 / 1; /* 1:1 square */
aspect-ratio: 1; /* Same as 1/1 */
}
/* Common aspect ratios */
.video-container {
aspect-ratio: 16 / 9; /* YouTube, modern video */
}
.instagram-post {
aspect-ratio: 1; /* Instagram square */
}
.portrait-photo {
aspect-ratio: 3 / 4; /* Portrait orientation */
}
.ultrawide {
aspect-ratio: 21 / 9; /* Ultrawide monitor */
}
/* With width set */
.card-image {
width: 100%;
aspect-ratio: 16 / 9;
/* Height automatically calculated */
}
/* With height set */
.sidebar-widget {
height: 300px;
aspect-ratio: 1;
/* Width automatically calculated to 300px */
}
/* Old way (padding hack) */
.old-video-container {
position: relative;
padding-bottom: 56.25%; /* 9/16 = 0.5625 = 56.25% */
height: 0;
}
.old-video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* New way (aspect-ratio) */
.new-video-container {
aspect-ratio: 16 / 9;
}
.new-video-container iframe {
width: 100%;
height: 100%;
}
/* Responsive images with aspect-ratio */
.image-grid img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}aspect-ratio Examples
📐 aspect-ratio Use Cases:
Perfect for: video containers, image placeholders, card thumbnails, profile avatars, social media embeds, and any element that needs to maintain proportions while being responsive. No more padding-bottom hacks!
Subgrid
subgrid allows a nested grid to inherit the track sizing from its parent grid. This solves the problem of aligning nested content across grid tracks.
/* Parent grid */
.parent-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
/* Child becomes a subgrid */
.child-grid {
display: grid;
grid-template-columns: subgrid; /* Inherit parent columns */
gap: 1rem;
}
/* Subgrid for rows */
.child-grid {
display: grid;
grid-template-rows: subgrid; /* Inherit parent rows */
}
/* Subgrid for both */
.child-grid {
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}
/* Practical example: Card grid */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.card {
display: grid;
grid-template-rows: subgrid; /* Align card content across grid */
gap: 1rem;
}
/* Without subgrid - cards misaligned */
.card-no-subgrid {
display: grid;
/* Each card has independent grid */
/* Headings, content, buttons don't align across cards */
}
/* With subgrid - perfect alignment */
.card-with-subgrid {
display: grid;
grid-template-rows: subgrid;
/* Headings align, content aligns, buttons align */
}
/* Spanning multiple tracks with subgrid */
.spanning-subgrid {
grid-column: span 2; /* Span 2 columns */
display: grid;
grid-template-columns: subgrid; /* Use those 2 columns as tracks */
}Browser Support: Subgrid is supported in Firefox 71+, Safari 16+, and Chrome 117+. For older browsers, grids will still work but without the subgrid alignment. Consider using @supports (grid-template-columns: subgrid) for progressive enhancement.
Subgrid Comparison (Notice Button Alignment)
Key Benefit: Subgrid solves the card alignment problem. Without subgrid, cards with different content heights have misaligned buttons. With subgrid, all buttons align perfectly across the row, regardless of content length.
place-items and place-content
Shorthand properties for aligning grid and flexbox items. These modern properties simplify alignment code.
/* place-items (shorthand for align-items + justify-items) */
.grid {
place-items: center; /* Both centered */
place-items: start end; /* align-items: start, justify-items: end */
}
/* Equivalent to: */
.grid {
align-items: center;
justify-items: center;
}
/* place-content (shorthand for align-content + justify-content) */
.grid {
place-content: center; /* Both centered */
place-content: space-between; /* Both space-between */
place-content: start end; /* Different values */
}
/* Equivalent to: */
.grid {
align-content: center;
justify-content: center;
}
/* place-self (for individual items) */
.item {
place-self: center; /* Center this item */
place-self: start end; /* Different alignment */
}
/* Common patterns */
/* Center everything */
.container {
display: grid;
place-items: center;
min-height: 100vh;
}
/* Center grid, align items to start */
.grid {
display: grid;
place-content: center;
place-items: start;
}Place Properties
| Property | Values | Description |
|---|---|---|
place-items | align-items justify-items | Shorthand for aligning all items |
place-content | align-content justify-content | Shorthand for aligning grid/flex container |
place-self | align-self justify-self | Shorthand for aligning individual item |
place Properties Examples
Practical Modern Layout Examples
Responsive Card Grid with Modern Features
Complete Modern Layout (gap + aspect-ratio + subgrid)
Video Container with aspect-ratio
Responsive Video Container
Key Takeaways
- gap: Spacing between grid/flex items (no edge margins)
- row-gap, column-gap: Control row and column spacing separately
- aspect-ratio: Maintain width-to-height proportions
- subgrid: Nested grids inherit parent track sizing
- place-items: Shorthand for align-items + justify-items
- place-content: Shorthand for align-content + justify-content
- gap works with both grid and flexbox
- aspect-ratio eliminates padding-bottom hacks
- subgrid solves card alignment problems
- Use clamp() with gap for responsive spacing
- Combine features for powerful modern layouts
- Check browser support for subgrid (Firefox, Safari, Chrome 117+)
What's Next?
Now that you understand modern layout features, you're ready to learn about Logical Properties. In the next lesson, we'll explore writing mode-aware properties that make your CSS work seamlessly with different languages and text directions, essential for internationalization.
These modern layout features significantly simplify responsive design. Start using gap instead of margin, aspect-ratio for responsive media, and experiment with subgrid for aligned card layouts. These tools make complex layouts easier and your code more maintainable!