Learning overview
- Estimated time
- 4 minutes
- Difficulty
- Beginner
- Prerequisites
- No prior experience required
- Learning outcome
- Explain css using a clear mental model · Apply css in practical CSS work
- Last updated
- July 18, 2026
Use Flexbox for a main-axis relationship
Flexbox lays items out along a main axis, allows them to grow or shrink, and aligns them along the cross axis. It suits navigation bars, toolbars, button groups, and rows where content determines item size.
.toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
}Use Grid for track relationships
Grid controls rows and columns together. It suits galleries, page shells, dashboards, and forms where items should align across shared tracks. Grid can also place items in named regions or overlap them deliberately.
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
gap: 1.5rem;
}Ask relationship questions
If items primarily form one row or column and content size should lead, begin with Flexbox. If items need shared row and column alignment, begin with Grid. A Grid card collection may contain Flexbox toolbars inside each card.
- Is alignment needed in one axis or two?
- Should content size items, or should tracks size them?
- Must items line up across rows?
- Will items wrap independently?
- Does source order remain logical?
Frequently asked questions
Is Grid newer or better than Flexbox?
Grid is not a replacement. It models two-dimensional tracks, while Flexbox models one-dimensional distribution. Both are current and often nested.
Can Flexbox create a grid of cards?
Yes, but Grid usually expresses equal track relationships more directly. Flexbox is preferable when row independence and content-led widths are intentional.
Topic graph
A taxonomy-generated path through this subject.
Related courses
Related learning
Recommended automatically from shared technologies, topics, intent, and difficulty.
Related Guides
Related Tutorials
Related Glossary
Related Cheatsheets
Related Projects
Related Interview Questions
Related reading
Hand-picked companion pages that deepen this topic.
Your next steps