HTML & CSS · Grid Layout · Lesson 17 of 25
Grid vs Flexbox
Concept
Grid vs Flexbox
Use Flexbox for one-dimensional layouts such as a single row or column. Use Grid when you need to control rows and columns together.
In practice, most real pages use both: Grid for the overall page skeleton, and Flexbox for aligning content inside smaller components like a card or a navbar.
By the end of this lesson
- Explain the core idea behind Grid vs Flexbox.
- Predict output before running a change.
- Test one realistic and one unusual input.
- Use the result to make the next decision.
How to study this page
- 1. Read one concept.
- 2. Change the example.
- 3. Run, compare, and explain.
- 4. Complete the challenge below.
ExampleRunnable
/* Flexbox: one direction */
.row { display: flex; }
/* Grid: two directions */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); }Self-check before continuing
Without looking at the example, describe what changes when you modify one input in Grid vs Flexbox. Then reopen the editor and prove your explanation with a small test.
You are ready to continue when you can predict, test, and explain the result.
Your turn
Decide whether Flexbox or Grid fits a photo gallery best, and explain why in a comment.
Loading editor…
Console