CSS grid - Adding Gaps between items
📏 CSS Grid Gaps – Perfect Spacing Made Easy!
Learn how to add professional spacing between grid items using CSS Grid's gap properties - no more messy margins or padding hacks!
🔹 What You'll Learn:
✔️ Uniform Gaps: gap: 10px (applies to rows AND columns)
✔️ Directional Control:
column-gap: 20px (vertical spacing only)
row-gap: 15px (horizontal spacing only)
✔️ Responsive Spacing: Use relative units (em, rem) for flexible layouts
✔️ Visual Balance: How gaps affect overall grid alignment
📌 Example Code:
css
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* Uniform 10px gap */
gap: 10px;
/* OR directional control */
column-gap: 20px;
row-gap: 15px;
}
🚀 Key Benefits:
Cleaner Code: Replace margin/padding hacks with one property
Pixel-Perfect: Precise control over spacing
Maintains Alignment: Gaps don't disrupt grid track sizing
⏱️ Timestamps:
0:00 Intro to grid spacing
1:10 Using the gap shorthand
2:25 Column vs. row gaps
3:40 Combining with auto-sizing
5:00 Responsive gap techniques
#CSS #WebDesign #FrontEnd #Coding