ADVERTISEMENT
Google AdSense Slot (headerLeaderboard)
Set your Publisher ID in src/config/ads.ts to display live ads.
CSS3 Tutorial• 6 min read
CSS Grid Layout
Two-dimensional grid layouts with rows and columns
CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows.
Defining Columns & Rows
Turn an element into a grid with display: grid;.
Use grid-template-columns to specify column tracks (e.g., repeat(3, 1fr) or 200px 1fr 200px).
Use gap (or grid-gap) to introduce clean gutters between grid cells without messy margins.
Responsive 3-Column Feature Grid
<div style="
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
font-family: sans-serif;
">
<div style="background: #ede9fe; padding: 20px; border-radius: 8px; text-align: center;">
<h3 style="color: #6d28d9; margin-top:0;">⚡ Lightning Fast</h3>
<p style="color: #4c1d95; font-size: 14px;">Instant client-side execution.</p>
</div>
<div style="background: #e0f2fe; padding: 20px; border-radius: 8px; text-align: center;">
<h3 style="color: #0369a1; margin-top:0;">🎓 Certified</h3>
<p style="color: #0c4a6e; font-size: 14px;">Official verifiable credentials.</p>
</div>
<div style="background: #fef3c7; padding: 20px; border-radius: 8px; text-align: center;">
<h3 style="color: #b45309; margin-top:0;">🚀 Gamified</h3>
<p style="color: #78350f; font-size: 14px;">Earn XP and level up daily.</p>
</div>
</div>ADVERTISEMENT
Google AdSense Slot (inContentBanner)
Set your Publisher ID in src/config/ads.ts to display live ads.
Test Yourself With Exercise
Which CSS unit represents a fractional fraction of free space in a CSS grid container?