Quest 1 • Lesson 9
💪 Flexbox & Grid
Flexbox and Grid are modern CSS layout systems that make building responsive, flexible designs easy and intuitive.
Flexbox
One‑dimensional (row or column)
One‑dimensional (row or column)
Grid
Two‑dimensional (rows AND columns)
Two‑dimensional (rows AND columns)
📏 Flexbox – One‑Dimensional Layout
Flexbox distributes space along a single axis (row or column).
1
2
3
4
5
display: flex; flex-direction: row; gap: 0.5rem;
📊 Grid – Two‑Dimensional Layout
Grid places items into rows and columns simultaneously.
A
B
C
D
E
F
display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
flexbox.css
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
grid.css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 1rem;
place-items: center;
}
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 1rem;
place-items: center;
}
🔑 Key Properties
Flexbox
display: flex;flex-direction: row/column;justify-content: center/space-between;align-items: center/stretch;flex-wrap: wrap;gap: 1rem;
Grid
display: grid;grid-template-columns: 1fr 1fr 1fr;grid-template-rows: auto;grid-column: span 2;grid-row: span 2;gap: 1rem;
✨ Challenge: Build a Dashboard Layout
Create a dashboard with:
- A header (full width)
- A sidebar (200px wide) on the left
- A main content area
- Use
grid-template-columns: 200px 1fr;
.dashboard {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr;
min-height: 100vh;
gap: 0.5rem;
}
.header { grid-column: 1 / 3; background: #1e293b; padding: 1rem; }
.sidebar { background: #0f172a; padding: 1rem; }
.main { background: #1e293b; padding: 1rem; }
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr;
min-height: 100vh;
gap: 0.5rem;
}
.header { grid-column: 1 / 3; background: #1e293b; padding: 1rem; }
.sidebar { background: #0f172a; padding: 1rem; }
.main { background: #1e293b; padding: 1rem; }
❤️ Support Free Education
This course is 100% free. If it helps you, consider buying me a coffee.
☕ Buy Me a Coffee➡️ Ready for more?
Next lesson: Project – Build a Personal Bio Page.
Continue to Lesson 1.10 →(Coming soon – check back or buy Pro Pack for instant access)