Thread by @JoshWComeau

Today I looked into the performance of different layout modes in CSS. I was curious if it takes the browser longer to lay out elements in a grid vs. Flexbox vs. flow layout.

TL:DR; they're all plenty fast ⚡️ but there are small differences.

Info in thread 👇🏻

For the benchmark, I created an app that renders 1000 random items, with a couple HTML tags in each one. I trigger a re-render, and measure how long it takes to recalculate layout.

Specifically looking for the time spent in this step:

1. Regular flow layout. No CSS on the container.

Average layout recalc time: 22.3ms

I imagine this is the lowest it could be, since each element fills the available width. No "interplay" between children.

This will be our baseline!

2. A flex column.

Very similar layout to the last element, except that margins don't collapse anymore.

Average layout recalc: 22.8ms (+2% slower, but really it's a wash).

Makes sense, browser isn't doing much different!

3. A flex row, with `flex-wrap: wrap`, and min/max sizes on children

This one requires a bit more computation, since the browser has to decide where the lines wrap.

Avg: 26.5ms (+19% slower)

4. A 5-column grid.

CSS:
display: grid;
grid-template-columns: repeat(5, 1fr);

Avg: 28.9ms (+30% slower)

I remember reading that CSS Grid could be slower in some circumstances, but it doesn't make a HUGE difference.

5. A CSS grid using the auto-fit trick.

CSS:
grid-template-columns: repeat(
auto-fit,
minmax(8em, 1fr)
);

Avg: 25.8ms (+16%)

I'm surprised that this one is slower than the 5-col one! It seems to be much more dynamic.

I repeated the experiment, same result.

These numbers are all recorded on a powerful iMac Pro, but I repeated the tests* on my budget Xiaomi Redmi 7A phone, a popular low-end smartphone in India.

Quickest (Flow layout): 149ms
Slowest (5-col Grid layout): 174ms (17% slower)

* I couldn't be fussed to figure out how to get Chrome devtools running on Android, so I instead measured the entire React re-render time. On PC, the layout recalc is about 20% of the total time, so I took 20% of the mobile re-render times. Not perfect, but probably close enough.

My takeaway: there is a cost when it comes to using dynamic layouts, but that cost is quite small in absolute terms.

Even on a low-end device, using Grid layout probably won't increase render times by a noticeable amount 😄

There is a caveat, which is that synthetic benchmarks are synthetic. Your app might have a very different tree shape, which might brush against edge-cases not present here.

Every situation is unique, which is why it's important to profile!

I've seen a couple "CSS Grid is slow, use Flexbox instead" takes, and I feel much more comfortable now saying that you should ignore them 😅 the folks working on browsers are super smart and they wouldn't ship a layout method with huge performance problems.

Grid it up!

Check out the benchmarks and run your own tests here: codesandbox.io/s/grid-perf-be…

Also, if you're interested in CSS performance, sign up for my newsletter! I'll be publishing more on this subject on my blog 😄

joshwcomeau.com/subscribe/

UPDATE: @brian_lovin reminded me that he experienced a very real perf issue with CSS Grid, so I did a bit more digging.

With nested grids, there IS a not-insignificant perf hit.

New benchmark: oczpm.csb.app

Grid version: 127ms
Flex version: 79ms

This demo has the following structure:

Grid
- Grid (x1000)
- Grid
- Grid
- Grid

4001 total `display: grid` calls 😮

Given the sheer volume, I'm actually kinda impressed with how well it held up 😅

I think my takeaway is the same: don't be afraid of Grid, use it when it makes sense to use it. But do check to make sure it doesn't cause problems for you: there may be times where it's slower!