CSS Grid Playground
Learn CSS Grid by Playing
Grid creates two-dimensional layouts (rows AND columns at once). Drag sliders and watch the grid form. No code typing needed.
New to Grid? Read the visual lesson →Grid Basics: Columns, Rows & Gap
These three properties create any grid. Drag the sliders and watch items rearrange.
Flexbox vs Grid — When to use each
Flexbox = one direction at a time (row OR column). Great for navbars, button rows, card strips.
Grid = two directions at once (rows AND columns). Great for page layouts, galleries, dashboards.
Think: Flexbox for components, Grid for layouts.
Column Sizing: fr, px, auto, minmax
Not all columns need to be the same width. Mix different sizing units.
What is "fr"?
fr stands for "fraction." It divides available space proportionally. 1fr 1fr 1fr = three equal columns. 1fr 2fr 1fr = middle column is twice as wide. 200px 1fr = first column is 200px, second takes all remaining space. Think of fr as "share of the leftovers."
Equal: All columns get the same fraction of space (1fr each). They share equally.
Grid Spanning: Items Across Multiple Cells
Make items stretch across columns or rows. Click an item, then set its span.
grid-column and grid-row
grid-column: span 2 makes an item stretch across 2 columns. grid-row: span 2 stretches across 2 rows. You can also use exact line numbers: grid-column: 1 / 3 means "start at line 1, end at line 3" (same as spanning 2 columns).
Click a cell in the grid, then adjust its span:
Real-World Grid Layouts
Click any layout to see it built with CSS Grid. Study the code, then copy it.
Click a layout above
The whole thing as one file
Everything you learned — a header, sidebar, main, and footer arranged with named grid areas, plus an auto-fit card grid inside — combined into one complete HTML file. Copy it into a new file, open it in a browser, and it just works. The live preview below is rendered from the exact same code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Grid Page</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #1f2433; background: #f6f7fb; }
/* ===== The page is ONE grid: header, sidebar, main, footer ===== */
.layout {
display: grid;
grid-template-columns: 200px 1fr; /* sidebar + flexible main */
grid-template-rows: auto 1fr auto; /* header, body, footer */
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
gap: 16px;
min-height: 100vh;
padding: 16px;
}
.layout > header { grid-area: header; }
.layout > .sidebar { grid-area: sidebar; }
.layout > main { grid-area: main; }
.layout > footer { grid-area: footer; }
header, .sidebar, main, footer {
background: #fff; border: 1px solid #e9edf3; border-radius: 12px; padding: 20px;
}
header { display: flex; align-items: center; justify-content: space-between; }
header h1 { font-size: 1.2rem; }
header nav a { color: #2563eb; text-decoration: none; margin-left: 16px; font-size: .9rem; }
.sidebar h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #6b7280; margin-bottom: 10px; }
.sidebar a { display: block; color: #374151; text-decoration: none; padding: 6px 0; font-size: .9rem; }
.sidebar a:hover { color: #2563eb; }
main h2 { margin-bottom: 12px; }
main p { color: #4b5563; margin-bottom: 12px; }
/* ===== A responsive card grid INSIDE main ===== */
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
margin-top: 16px;
}
.card {
background: #eef2ff; border-radius: 10px; padding: 24px 16px;
text-align: center; font-weight: 700; color: #3730a3;
}
footer { text-align: center; color: #6b7280; font-size: .85rem; }
/* ===== Stack into one column on small screens ===== */
@media (max-width: 600px) {
.layout {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"sidebar"
"main"
"footer";
}
}
</style>
</head>
<body>
<div class="layout">
<header>
<h1>Grid Co.</h1>
<nav><a href="#">Home</a><a href="#">Docs</a><a href="#">About</a></nav>
</header>
<aside class="sidebar">
<h2>Sections</h2>
<a href="#">Overview</a>
<a href="#">Features</a>
<a href="#">Pricing</a>
<a href="#">Support</a>
</aside>
<main>
<h2>Welcome</h2>
<p>This whole page is laid out with one CSS Grid using named template areas. Resize the window narrow and everything stacks into a single column.</p>
<p>The cards below use auto-fit with minmax, so they reflow on their own with zero media queries.</p>
<div class="cards">
<div class="card">A</div>
<div class="card">B</div>
<div class="card">C</div>
<div class="card">D</div>
<div class="card">E</div>
<div class="card">F</div>
</div>
</main>
<footer>© 2026 Grid Co. — built with CSS Grid.</footer>
</div>
</body>
</html>One grid, whole page
The live preview above is rendered from the exact code in the box — so what you copy is precisely what you see. No libraries, no build step.