Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Beyond basic grid layouts, CSS Grid offers powerful advanced features like subgrid for nested alignment, minmax() for flexible sizing, and auto-fill/auto-fit for responsive grids without media queries!
Nested grids inherit parent tracks
Flexible sizing with min/max bounds
Responsive without media queries
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Subgrid Power</title>
</head>
<body>
<div class="container">
<h1>📐 Subgrid Alignment</h1>
<div class="parent-grid">
<div class="card">
<div class="card-header">Card 1</div>
<div class="card-body">Content aligns perfectly across all cards!</div>
<div class="card-footer">Footer</div>
</div>
<div class="card">
<div class="card-header">Card 2 with Longer Title</div>
<div class="card-body">More content here with different lengths</div>
<div class="card-footer">Footer aligned</div>
</div>
<div class="card">
<div class="card-header">Card 3</div>
<div class="card-body">Notice how footers align!</div>
<div class="card-footer">Perfect alignment</div>
</div>
</div>
<div class="note">
<h3>💡 What is Subgrid?</h3>
<p>
Subgrid allows nested grids to participate in their parent's grid tracks.
This ensures perfect alignment across nested elements - headers, content,
and footers all line up beautifully!
</p>
</div>
</div>
</body>
</html>Loading preview...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto-fill vs Auto-fit</title>
</head>
<body>
<div class="container">
<h1>🔄 Auto-fill vs Auto-fit</h1>
<div class="demo-section">
<h2>auto-fill (Creates empty tracks)</h2>
<div class="auto-fill-grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
<div class="code">
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
</div>
<div class="highlight">
<p>✨ Creates as many tracks as will fit, even if empty. Items don't stretch to fill extra space.</p>
</div>
</div>
<div class="demo-section">
<h2>auto-fit (Collapses empty tracks)</h2>
<div class="auto-fit-grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
<div class="code">
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
</div>
<div class="highlight">
<p>⚡ Collapses empty tracks to 0. Items stretch to fill available space!</p>
</div>
</div>
</div>
</body>
</html>Loading preview...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minmax() Function</title>
</head>
<body>
<div class="container">
<h1>📏 Minmax() Mastery</h1>
<div class="demo-grid">
<div class="demo-card">
<h3>Fixed min, flexible max</h3>
<div class="grid-demo demo1">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
<div class="code">
minmax(100px, 1fr)
/* Min: 100px, Max: flexible */
</div>
</div>
<div class="demo-card">
<h3>First column larger</h3>
<div class="grid-demo demo2">
<div class="item">Wide</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
<div class="code">
minmax(200px, 1fr) 1fr 1fr
/* First column at least 200px */
</div>
</div>
<div class="demo-card">
<h3>Responsive with auto-fit</h3>
<div class="grid-demo demo3">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div class="code">
repeat(auto-fit, minmax(150px, 1fr))
/* Perfect responsive grid! */
</div>
</div>
</div>
</div>
</body>
</html>Loading preview...
grid-template-rows: subgrid;Inherit parent's row tracks
repeat(auto-fit, minmax(200px, 1fr));Perfect responsive grid
minmax(100px, 1fr);Min 100px, flexible max
grid-auto-flow: dense;Fill gaps automatically