Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Classic three-column layout with header and footer
Fixed sidebar with flexible main content area
Responsive grid of equal-height cards
Full-screen hero with centered content
.container {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
gap: 1rem;
}.container {
display: flex;
gap: 1rem;
}
.sidebar {
width: 250px; /* Fixed width */
}
.main {
flex: 1; /* Takes remaining space */
}.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
.card {
padding: 1.5rem;
border-radius: 8px;
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}Compelling hero description text
.hero {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
text-align: center;
}.masonry {
columns: 3;
gap: 1rem;
}
.masonry-item {
break-inside: avoid;
margin-bottom: 1rem;
}.header {
position: sticky;
top: 0;
z-index: 100;
background: white;
}CSS Grid: Page layouts, complex positioning, two-dimensional arrangements
Flexbox: Component layouts, navigation bars, centering, one-dimensional arrangements
CSS Multi-column: Text layouts, masonry-style arrangements
Position: Overlays, tooltips, specific positioning needs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Layout Essentials Playground</title>
</head>
<body>
<div class="playground">
<header class="playground-header">
<div>
<p class="eyebrow">Layout Essentials</p>
<h2>Spacing, Display, Positioning & Flexbox</h2>
</div>
<button id="theme-toggle" class="theme-toggle">🌙 Switch to Dark Mode</button>
</header>
<section class="section spacing-system">
<h3>Spacing System</h3>
<div class="spacing-grid">
<div class="spacing-card">
<span class="spacing-value">0.5rem</span>
<p class="spacing-label">Extra-tight</p>
</div>
<div class="spacing-card">
<span class="spacing-value">1rem</span>
<p class="spacing-label">Base spacing</p>
</div>
<div class="spacing-card">
<span class="spacing-value">1.5rem</span>
<p class="spacing-label">Comfortable</p>
</div>
<div class="spacing-card">
<span class="spacing-value">2.5rem</span>
<p class="spacing-label">Loose</p>
</div>
</div>
</section>
<section class="section display-system">
<h3>Display Modes</h3>
<div class="display-row">
<div class="display-demo display-block">block</div>
<div class="display-demo display-inline">inline</div>
<div class="display-demo display-inline-block">inline-block</div>
<div class="display-demo display-grid">grid</div>
</div>
</section>
<section class="section position-system">
<h3>Positioning Playground</h3>
<div class="position-stage">
<div class="position-card top-left">Top Left</div>
<div class="position-card bottom-right">Bottom Right</div>
<div class="position-card center">Centered</div>
</div>
</section>
<section class="section flexbox-system">
<h3>Flexbox Layout</h3>
<div class="flexbox-demo">
<span class="flex-item">1</span>
<span class="flex-item">2</span>
<span class="flex-item">3</span>
<span class="flex-item">4</span>
</div>
</section>
</div>
</body>
</html>Loading preview...