Grid vs. Flexbox for real-world responsive layouts
When it comes to building modern websites, two CSS tools dominate responsive layout work: Flexbox and CSS Grid.
Both are powerful, but they solve different problems. In this guide, I’ll show you how to use each one, when to choose one over the other, and how to combine them for layouts that adapt beautifully to any screen size.
By the end, you’ll understand the why and have interactive demos you can experiment with to practice the how.
1. Flexbox vs. Grid: Which Should You Use?
A quick rule of thumb:
- Flexbox is one-dimensional. Great for laying out items in a single row or column.
- Grid is two-dimensional. Perfect for complex layouts with rows and columns.
Think of Flexbox as arranging books on a shelf. Grid is building the entire shelving unit.
Tip: They are not competitors. Many sites use both. For example, Grid can define the page structure while Flexbox handles alignment inside each section.
2. Flexbox Essentials
Flexbox shines when you need to align, distribute, or reorder items across one axis.
Key properties:
- Flex-direction: row, column, and reversed versions.
- Flex-wrap: controls whether items wrap to new lines.
- Justify-content: horizontal alignment
- align-items: vertical alignment.
- Gap: spacing between items.
Try it yourself:
I’ve created an interactive flexbox playground for you to experiment with the various properties and see changes in real time.
Things to try:
- Change flex-direction from row to column.
- Increase gap to create spacing.
- Test space-between and space-evenly in justify-content.
Flexbox makes alignment effortless without floats or positioning tricks.
Note: Depending on the existing settings, some changes may not show visible effect (i.e changing flex-wrap when the screen is wide enough that no wrapping takes place).
See the Pen
Interactive Flexbox Playground by AJM Media (@AJMMedia)
on CodePen.
3. CSS Grid Essentials
Grid is ideal for full layouts such as galleries, dashboards, or card-based designs.
Key concepts:
- Tracks: rows and columns defined with grid-template-columns and grid-template-rows.
- auto-fit / auto-fill: responsive placement of items into flexible columns.
- minmax(): define minimum and maximum track sizes.
- gap: clean, consistent spacing.
Try it yourself:
Things to try:
- Switch between auto-fit and auto-fill.
- Change the minimum track size in minmax() and watch the grid respond.
- Flexbox makes alignment effortless without floats or positioning tricks.
See the Pen
Interactive CSS Grid Playground by AJM Media (@AJMMedia)
on CodePen.
4. Responsive Layouts in Action
Now let’s combine these techniques. Imagine a set of product cards. On wide screens you want multiple columns. On smaller screens they should stack neatly into one column.
Container Queries make this possible by letting layouts adapt to their parent container rather than the entire viewport.
Try it yourself:
Drag the slider to change container width. Notice how the layout shifts gracefully from multiple columns to a single stack.
See the Pen
Interactive Responsive Cards Playground by AJM Media (@AJMMedia)
on CodePen.
5. Pitfalls and Quick Tips
- Do not force Grid on everything. A responsive navbar is usually simpler with Flexbox.
- Be aware of the min-content issue. Grid tracks can shrink to fit unless controlled with minmax().
- Use gap instead of margins for cleaner spacing. Both Grid and Flexbox support it.
- Combine Grid and Flexbox where it makes sense. Grid for page structure, Flexbox for alignment inside sections.
6. Ready to Use Recipes
Centered Flexbox container
.container {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
Responsive grid of cards
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
7. Wrapping Up
CSS Grid and Flexbox are the backbone of responsive design.
- Flexbox is best for alignment and one-dimensional layouts
- Grid is best for structure and two-dimensional layouts
- The real power comes from combining them
If you’d like a responsive website that not only looks great but also performs well for your business, get in touch. I’d love to help bring your project to life.
