Search for ‘is CSS Grid slower than Flexbox’ and you’ll find a few posts explaining that it is. In my experience, even if it was, it is not anymore. Well, not for the scenario I tested anyway.

The tests

I took 200 elements with a nested element. The DOM for each was like this:

<div class="wn-Item">
    <div class="icon"></div>
    item2
</div>

The CSS looked like this for the Flex variant:

.wn-PreMatchGroup {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 100%;
    max-width: 500px;
    margin: auto;
}
.wn-Item {
    display: flex;
    width: 100%;
    align-items: center;
    height: 45px;
    gap: 0 10px;
}
.icon {
    width: 20px;
    height: 20px;
    background-color: gold;
}

And like this for the Grid variant:

.wn-PreMatchGroup {
    position: relative;
    display: grid;
    grid-template-columns: 1fr minmax(auto, 500px) 1fr;
}
.wn-Item {
    display: grid;
    grid-auto-flow: column;
    width: 100%;
    place-content: center start;
    height: 45px;
    gap: 0 10px;
    grid-column: 2;
}
.icon {
    width: 20px;
    height: 20px;
    background-color: gold;
}

The idea being that there was some computation to be done regarding the maximum width the column should be, and how the ‘gutters’ were made each side.

To measure performance I used a snippet from MDN:

    const observer = new PerformanceObserver((list) => {
      list.getEntries().forEach((entry) => {
        console.log(
          `The time to ${entry.name} was ${entry.startTime} milliseconds.`,
    );
    // Logs "The time to first-paint was 386.7999999523163 milliseconds."
    // Logs "The time to first-contentful-paint was 400.6999999284744 milliseconds."
  });
});

observer.observe({ type: "paint", buffered: true });

You can grab/view the files here: https://github.com/benfrain/css-performance-tests

Results

Take a look for yourself in the browser but over 20-30 refreshes of the page I see no significant difference, using Chrome 127 or Safari 17.6. 20 results below. I got bored after than…

Run	Chrome Flex	Chrome Grid	Safari Flex	Safari Grid
1	58.20	62.80	15.00	16.00
2	49.70	61.00	10.00	16.00
3	51.80	43.00	13.00	17.00
4	56.60	48.69	14.00	16.00
5	54.60	62.00	13.00	19.00
6	50.60	50.40	13.00	18.00
7	61.80	48.79	15.00	20.00
8	50.60	51.90	15.00	19.00
9	48.69	58.69	16.00	20.00
10	51.00	60.30	13.00	21.00
11	49.59	45.50	16.00	18.00
12	56.19	49.40	17.00	20.00
13	60.19	49.30	13.00	18.00
14	62.00	52.59	16.00	17.00
15	67.79	52.39	15.00	21.00
16	59.70	56.50	15.00	19.00
17	50.30	45.60	16.00	13.00
18	51.50	62.50	15.00	17.00
19	56.90	44.00	15.00	16.00
20	51.19	49.80	17.00	24.00
Average	54.84	52.75	14.6	18.25

Summary

I’ve done a few of these kinds of tests over the years.

As ever, it is essential to test CSS performance dogma against your own real world scenario. I’m not saying Grid will never be a problem, or Flex for that matter. But don’t assume it will be either.