CSS Grid vs Flexbox: When to Use Each, With Examples

CSS Grid vs Flexbox at a glance

CSS Grid vs Flexbox is one of the first real layout questions a front-end developer wrestles with, and it causes confusion because both tools arrange things on a page and their jobs overlap in the middle. The cleanest way to hold them apart is by direction. Flexbox works in one dimension at a time, laying items out along a single row or a single column. Grid works in two dimensions at once, placing items into rows and columns together, like a spreadsheet you design.

Think of Flexbox as arranging books on a single shelf. You can space them out, push them to one end, center them, let them grow or shrink to fill the shelf, but they all sit along that one line. Grid is more like arranging a whole bookcase at once, deciding both which shelf and which position on that shelf every item takes. One is a line. The other is a grid of lines crossing each other.

Here is the short version, and the rest of this guide unpacks it. Reach for Flexbox when you are lining a handful of items up in a row or column and want control over the spacing between them, a navigation bar, a row of buttons, a card's inner stack. Reach for Grid when you are laying out a larger structure where things need to align across both rows and columns, a page skeleton, a gallery, a dashboard, a magazine-style section. And very often the right answer is both, with Grid setting the big structure and Flexbox arranging the contents inside each area.

The old framing that made this feel like a fight was mostly a product of timing. Flexbox arrived first and got used for everything, including two-dimensional layouts it was never meant for, which required awkward workarounds. Then Grid arrived and made those layouts simple. People argued about which had won, but the real lesson was that they solve different problems. Once you see the difference in dimensions, most of the confusion clears, so let us build it up properly.

What Flexbox actually is

Flexbox, short for the Flexible Box Layout, is a CSS layout method built for arranging items along a single axis and distributing space among them. You turn a container into a flex container, and its direct children become flex items that line up in a row or a column, with a set of controls for how they align and how any extra space is shared. The full reference lives at MDN Web Docs.

The word flexible is the key. Flexbox is very good at answering questions like: spread these items evenly across the bar, push this one to the far right while the others stay left, make these three boxes share the available width equally, or center this item perfectly both ways. It handles the messy reality that you often do not know exactly how wide the content or the screen will be, and it distributes space gracefully as those change.

Here is a small, familiar example, a navigation bar with a logo on the left and links on the right:

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

Those three lines do a lot. display: flex turns on Flexbox. align-items: center lines everything up neatly on the vertical center so the logo and links share a baseline. justify-content: space-between pushes the first item to one end and the last to the other, filling the gap between them. Achieving this cleanly before Flexbox took far more code and far more fiddling, which is why Flexbox was such a relief when it arrived.

Where Flexbox starts to strain is when you ask it to control two dimensions at once, to make items line up both across rows and down columns in a strict structure. It can wrap items onto multiple lines, but it does not give you real control over how those lines align into a grid, because that was never its job. The moment you find yourself fighting to make rows and columns line up together, that is Flexbox telling you the job belongs to Grid.

What CSS Grid actually is

CSS Grid Layout is a layout method built for two dimensions, rows and columns together. You define a grid on a container, describing how many columns and rows it has and how big each is, and then you place items into that structure, either letting them flow in automatically or positioning them precisely. The reference is at MDN Web Docs.

Grid is the tool you want when the layout is the point, when you are designing the overall structure of a page or a section and you need things to align cleanly across both axes. You draw the grid first, then drop content into it, which is the opposite mental model from Flexbox in a way that turns out to matter, and we will come back to that difference.

Here is a small example, a simple three-column gallery with even gaps:

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

Again, a lot happens in a little code. display: grid turns on Grid. grid-template-columns: repeat(3, 1fr) creates three columns that each take an equal share of the available width. gap puts even spacing between every item in both directions. Items placed in this container flow into the three columns and wrap onto new rows automatically, all perfectly aligned, with no wrappers or workarounds. Building this with older methods, or forcing it out of Flexbox, would take much more effort and be far more fragile.

Grid can also do sophisticated things: place a specific item so it spans two columns and three rows, create named areas so a layout reads almost like a diagram in the code, and rearrange the whole structure at different screen sizes with a single change. It is the most capable layout tool CSS has, and for whole-page and whole-section structure it is usually the right starting point. Where it is overkill is for a simple line of items, which is exactly where Flexbox shines, so the two hand off to each other cleanly.

How layout worked before these tools

It helps to understand where these tools came from, because their strengths are answers to real pain that developers lived with for years. Before Flexbox and Grid, CSS had no layout tools built for the job, so developers borrowed features meant for other purposes and bent them into layouts.

In the earliest days, people built page layouts with HTML tables, literally arranging a page into table rows and cells. It worked visually, but it tangled the structure of the content with its appearance, made pages heavy and hard to change, and behaved poorly for people using screen readers, since a table is supposed to mean tabular data, not page structure. It was a workaround born of necessity, not a good tool.

The next era leaned on floats, a CSS feature originally designed to let text wrap around an image, like in a magazine. Developers repurposed floats to place elements side by side and build multi-column layouts. It became the standard approach for a long time, but it was fragile and full of quirks. Floated elements fell out of the normal flow, so containers would collapse and need special fixes, and vertical centering, something as simple as putting a box in the middle of another box, was famously painful. Whole articles and clever tricks existed just to solve problems that Flexbox and Grid now handle with a line or two.

Understanding this history explains why front-end developers greeted Flexbox and then Grid with such relief. They were not incremental conveniences. They were the first CSS features actually designed for layout, replacing years of hacks with tools that say what they mean. When you use justify-content to space items or define grid columns directly, you are expressing intent clearly in a way the old float-and-table era never allowed. That clarity is not just pleasant, it makes sites easier to build correctly and far easier to maintain, which is a real business benefit even if your visitors never see the code.

One dimension vs two dimensions

If you remember only one thing from this guide, make it this: Flexbox is one-dimensional and Grid is two-dimensional. Almost every other difference between them flows from that single fact, so it is worth sitting with for a moment.

One-dimensional means Flexbox concerns itself with a single line at a time, either a row or a column. It is brilliant at deciding how items share the space along that one line, how they align on it, and what happens when there is extra room or not enough. Even when Flexbox wraps items onto multiple lines, it treats each line on its own and does not coordinate them into a strict grid. Its whole worldview is one axis.

Two-dimensional means Grid concerns itself with rows and columns at the same time. It can say that this item belongs in the second column of the third row, or that this one spans from here to there across both directions, and everything lines up on both axes because Grid is aware of both at once. This is why complex layouts that would take clever hacks in Flexbox often become simple and readable in Grid.

The practical rule that falls out of this is short. If you are laying out things along a single line and mostly care about spacing and alignment on that line, that is a Flexbox job. If you are laying out things that need to align across both rows and columns as a structure, that is a Grid job. When you catch yourself adding extra wrapper elements to force alignment in one tool, it is usually a sign you have reached for the wrong one. The tools tell you, if you listen, which dimension the problem really lives in.

Side by side comparison

Here is the whole comparison in one view. Remember that this is about fit for a given job, not one being better overall, because a real page uses both.

Read the rows and you can feel the split. If your problem is a single line of items and how they share space, the Flexbox column keeps saying yes. If your problem is a structure with alignment in both directions, the Grid column lights up. Most confusion comes from trying to make one tool do the other's row, so the fix is almost always to switch tools rather than to fight harder.

Flexbox examples that fit

Let us ground this with the everyday cases where Flexbox is clearly the right pick, because recognizing the pattern is what makes the choice fast.

Navigation bars. A header with a logo on one side and links on the other is a single row of items that need aligning and spacing. That is Flexbox at its most natural, as our earlier example showed.

Rows of buttons or tags. A group of buttons, filter chips, or tags sitting in a line, evenly spaced, wrapping to a new line when they run out of room, is squarely a Flexbox job. Each line is independent and you only care about the flow along it.

The inside of a card. Within a single card, you often stack a title, some text, and a button in a column, and want the button pinned to the bottom no matter how much text sits above it. Flexbox in column direction handles that pinning gracefully, which is fiddly with older methods.

Centering something. The classic hard problem of perfectly centering an item both horizontally and vertically became almost trivial with Flexbox. A couple of alignment properties on the container and the child sits dead center.

A media object. An avatar or icon beside a block of text, aligned neatly, that grows and shrinks well, is a small one-dimensional layout that Flexbox handles cleanly. The common thread across all of these is a single line of items where you care about spacing and alignment along that line. Whenever you see that shape, Flexbox is almost always the tool.

Grid examples that fit

Now the cases where Grid is the natural choice, which tend to be about structure rather than a single line.

The overall page skeleton. A page with a header, a sidebar, a main area, and a footer arranged into a deliberate structure is a two-dimensional layout. Grid lets you describe that skeleton directly, often using named areas that make the code read almost like a picture of the page.

Image galleries and card grids. A gallery of images or a grid of product cards that line up in even rows and columns, with consistent gaps, is exactly what Grid was built for. Items flow into the grid and wrap into new rows while staying perfectly aligned in both directions.

Dashboards. A dashboard with panels of different sizes, some spanning two columns, some two rows, arranged into a coherent whole, is a natural Grid job because Grid makes spanning cells simple and keeps everything aligned.

Magazine-style layouts. Designs where a feature block is large and others are smaller, arranged in an interesting but orderly structure, lean on Grid's ability to place and span items precisely, including letting items overlap when the design calls for it.

Any strict two-axis alignment. Whenever the design requires things to line up both across and down, forms with labels and fields aligned in columns, comparison tables of cards, pricing sections with even rows, Grid gives you that alignment for free. The common thread is structure in two directions. When you see it, Grid is usually where to start.

Content-first vs layout-first

There is a deeper way to tell the two apart that experienced developers lean on, and it is about which comes first, the content or the layout. It sounds abstract, but it is one of the most reliable instincts you can build.

Flexbox is content-first. You hand it a set of items and it figures out how to distribute them along the line based on their sizes and the space available. The content leads, and the layout responds to it. This is why Flexbox feels so natural for things like a row of buttons whose number or width you do not know in advance. You are saying, here are some items, arrange them nicely along this line, and Flexbox obliges.

Grid is layout-first. You define the structure, the rows and columns, before you worry about what goes in them, and then you place content into that structure. The layout leads, and the content fits into it. This is why Grid feels right for a page skeleton or a gallery, where you have a clear picture of the shape you want and you are placing content into predefined regions. You are saying, here is my structure, now let me drop things into these areas.

So a quick gut check when you are unsure: are you arranging items and letting them determine the shape, or are you designing a shape and placing items into it? Content leading points to Flexbox. Layout leading points to Grid. This framing cuts through a surprising number of hard cases, because it gets at the intent behind the layout rather than just its appearance. Once it clicks, you will find yourself reaching for the right tool without having to think it through each time.

Using Grid and Flexbox together

Here is the part that dissolves the whole rivalry: the best layouts almost always use both, each for the part it does best. Treating it as a choice between them, as if picking one meant abandoning the other, misses how real front ends are built.

The common and clean pattern is Grid on the outside, Flexbox on the inside. You use Grid to lay out the overall structure of a page or a section, the header, sidebar, main area, footer, or the rows and columns of a card gallery. Then, inside individual areas of that grid, you use Flexbox to arrange the contents, the row of links in the header, the stack of title, text, and button inside each card. Grid handles the big two-dimensional structure, Flexbox handles the one-dimensional flow within each piece.

This layering is not a compromise or a workaround. It is how the tools were meant to be used, and it reads beautifully in the code because each layer expresses exactly what it is doing. The grid section says structure. The flex section says arrange these items along a line. Anyone reading it later understands the intent at a glance, which is worth a great deal on a codebase that people maintain over years, a theme we explore more in what is a web application where maintainability shapes so many technical choices.

So when you catch yourself framing the question as Grid or Flexbox for the whole page, step back. The better question is which tool fits each part. The header is probably Flexbox. The page skeleton is probably Grid. The gallery is Grid, and each card inside it is probably Flexbox. Learn to see a design as a set of nested layout problems, each with its own natural tool, and both the building and the maintaining get easier.

It is worth saying that the nesting can go more than one level deep, and that is perfectly normal. A Grid page can contain a card that uses Flexbox, and inside that card a small toolbar row that uses Flexbox again in a different direction. Each layer only worries about its own small job, which is exactly why the code stays readable even when the design is intricate. You are never trying to make a single tool solve the whole page. You are letting each region pick the tool that suits it, and the result is a layout that is both easier to reason about now and easier to change later when the design inevitably evolves.

Responsive design with each

A layout is only as good as how it holds up across screen sizes, so it is worth seeing how each tool behaves as the viewport changes, because both are genuinely strong here in different ways.

Flexbox adapts naturally because it is built around distributing available space. Items can grow to fill extra room, shrink when space is tight, and wrap onto new lines when they run out of width. For a row of items that should reflow gracefully on a narrow phone, Flexbox often does much of the work with very little instruction, because responding to available space is its nature.

Grid brings its own responsive strengths, and they are considerable. You can change the number of columns at different screen sizes, so a three-column gallery becomes a single column on a phone with one small rule. Grid also has modern features that let a layout automatically fit as many columns as will comfortably fit and wrap the rest, which produces galleries that respond to the screen with almost no breakpoints at all. And because Grid separates structure from content, you can rearrange an entire layout for small screens by redefining the grid, without touching the markup.

In practice, responsive design uses both, along with the media queries that let you change rules at different widths. Grid restructures the big layout at each size, Flexbox handles the graceful flow of items within each part, and together they produce designs that feel considered on every device rather than merely shrunk. Getting this right is a large part of why a professional front end feels solid on a phone while an amateur one falls apart, and it is closely tied to performance too, since a clean layout avoids the heavy workarounds that slow pages down, something we dig into in how to improve website speed.

Alignment and gap they both share

One reason Grid and Flexbox feel like a matched pair is that they share a family of alignment and spacing controls, so much of what you learn in one carries straight over to the other. This overlap is deliberate, and knowing about it saves you from relearning the same ideas twice.

Both tools use the same set of alignment properties to position items along their axes. Whether you are working in Flexbox or Grid, you reach for the same vocabulary to say center these items, push them to the start or end, or spread them out with space between. In Flexbox those controls act along the single axis you are working on. In Grid they act along both axes, since Grid has two. But the words and the ideas are the same, which means the mental effort of learning alignment pays off across both tools rather than just one.

They also share the gap property, which is one of the quiet joys of modern CSS. Gap lets you set consistent spacing between items without adding margins to each one and then fighting the extra space at the edges. In a Flexbox row it spaces the items along the line. In a Grid it spaces both the rows and the columns. Before gap existed, spacing items evenly meant fiddly margin math and special cases for the first or last item, so having one clean property that just works in both tools removed a whole category of small frustrations.

The practical upshot is encouraging for anyone learning. You are not studying two unrelated systems. You are learning one family of layout ideas with two members, one for a line and one for a grid, that share a common vocabulary for alignment and spacing. Get comfortable with the shared controls and you are most of the way to being fluent in both. That shared foundation is another reason the sensible approach is to learn both and use each where it fits, rather than picking a side and trying to make it do everything.

When to reach for Flexbox

Let us make it concrete. Reach for Flexbox when several of these describe your situation:

• You are arranging items along a single line, a row or a column.
• You care mainly about spacing and alignment along that one line.
• You do not know in advance how many items there are or how wide they will be.
• You want items to grow, shrink, or wrap based on available space.
• You are working inside a component, a card, a bar, a small group of items.
• You need to center something or pin one item to an end of the line.

When the shape of the problem is a single line of items whose flow you want to control, Flexbox is the tool that expresses it with the least code and the fewest surprises. Choosing it for those cases is not settling, it is using the right instrument. The mistake would be forcing Flexbox to build a two-dimensional structure it was never designed for, which is where the extra wrappers and hacks creep in.

When to reach for Grid

Reach for Grid when several of these fit:

• You are building the overall structure of a page or a large section.
• Things need to align across both rows and columns as a coherent whole.
• You want to place items precisely, or have some span multiple rows or columns.
• You have a clear picture of the layout shape and want to define it directly.
• You are building a gallery, a dashboard, or a structured, grid-like design.
• You want to rearrange the whole layout at different screen sizes cleanly.

When the problem is genuinely two-dimensional, Grid turns what used to be a tangle of workarounds into a few readable lines. It is the most capable layout tool CSS offers, and for structure it is usually the right place to start. The mistake here would be reaching for Grid to lay out a simple row of items, which Flexbox does more naturally, so match the tool to the dimension of the problem and you will rarely go wrong.

Common mistakes to avoid

A few predictable errors trip developers up, especially those still building the instinct for which tool fits. Knowing them shortcuts a lot of frustration.

Forcing Flexbox to do two-dimensional layout

The classic mistake is building a grid-like structure out of Flexbox, wrapping rows in extra containers and fighting to make columns line up. If you are adding wrappers to force alignment across rows and columns, stop and use Grid. It is the clearest signal you picked the wrong tool.

Using Grid for a simple row of items

The opposite error is reaching for Grid to lay out a single line, like a navbar, where Flexbox is simpler and more natural. Grid can do it, but you are bringing heavy machinery to a light job.

Thinking you must choose one for the whole site

Neither tool wins the whole page. The best layouts nest them, Grid for structure, Flexbox for flow within it. Framing it as one versus the other for everything leads to awkward code.

Adding wrapper elements to force a layout

A pile of extra divs whose only job is to make a layout behave is usually a symptom of the wrong tool. Modern Grid and Flexbox let you do most layouts with clean markup. If the markup is bloating to prop up the layout, rethink the approach.

Ignoring the source order and accessibility

Both tools can visually reorder items, but the underlying order still matters for people using keyboards and screen readers. Do not let a clever visual rearrangement scramble the logical order that assistive technology follows. Keep the reading order sensible.

Skipping testing on real screen sizes

A layout that looks perfect on your monitor can fall apart on a phone. Test across sizes as you build, not once at the end, so responsive issues surface while they are still cheap to fix.

A quick decision reference

To make the choice fast in the moment, here is a compact reference you can keep. Ask these in order and you will land on the right tool almost every time.

• Am I arranging items along one line? Use Flexbox.
• Do things need to align across rows and columns together? Use Grid.
• Am I building the overall page or section structure? Start with Grid.
• Am I arranging the contents inside one component or area? Use Flexbox.
• Is the content leading and the layout responding? Lean Flexbox.
• Is the layout leading and content filling it? Lean Grid.
• Do I need items to span multiple rows or columns, or to overlap? Use Grid.
• Do I need items to grow, shrink, and wrap along a line? Use Flexbox.

Most real designs answer yes to some of each, which is your cue to use both, nested. Grid for the skeleton, Flexbox for the flow inside it. Keep this list handy while the instinct is still forming and, before long, you will not need it, because the shape of each problem will tell you which tool it wants. If you would like a professional front end built with these decisions made correctly from the start, that is exactly the kind of work we do, and you can request a free quote to talk it through.

Final thoughts

CSS Grid vs Flexbox is not a contest with a single winner, because the two were built for different jobs and are strongest when they work together. Flexbox is your tool for arranging items along one line, distributing space, aligning, and letting content flow. Grid is your tool for two-dimensional structure, page skeletons, galleries, dashboards, anything that needs to line up across rows and columns at once. One dimension versus two is the whole idea in a sentence.

The costly mistakes are almost always about forcing the wrong tool: bending Flexbox into a grid it was never meant to be, or wheeling Grid out for a simple row. Learn to read a design as a set of nested layout problems, each with a natural tool, and the choice stops being a debate and becomes an instinct. Grid on the outside, Flexbox on the inside, is a pattern that will carry you through the vast majority of real layouts.

If you would like a front end that is laid out correctly, responsive on every device, and clean enough to maintain for years, that is exactly the kind of work we take on. Tell us what you are building and how it needs to look and behave, and we will build it with the right tool for each part. You can get in touch whenever you are ready.