Grid2 Doesn't use css gap? Why?

[httpete]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Css Gap is the best css feature ever. I can't understand why the shiny new Mui Grid2 would choose an old hacky technique for spacing?

Can we opt into this? This is a showstopper for me.

Examples 🌈

.

Motivation 🔦

.

[oliviertassinari]

Related to #34510, #35104 (comment)

[siriwatknp]

Related to #34510, #35104 (comment)

@oliviertassinari This issue is not related to those. The way we want the Grid component to work cannot be applied using CSS gap.

@httpete Here is the demo of why using gap does not work for the current API: https://codesandbox.io/s/poc-grid-gap-e1nq9l?file=/index.js

For the Grid item, you will need to know how many items are in a row, so that you can do this:

<div
  className="item"
  css={{
    width: "calc((100% - $gap * $(amount of items - 1)) / 3)",
    background: "tomato",
    color: "#fff"
  }}
>
  half
</div>

You can't mix gap with width in percentage.

[oliviertassinari]

@siriwatknp Right, great point.

So @httpete you can subscribe to #9513 for a version of the Grid that uses the CSS gap instead of the negative margin. It would need to use CSS grid, over CSS flexbox.

[httpete]

No it wouldn’t, css gap works fine with flex box, been using it for years.

[oliviertassinari]

css gap works fine with flex box, been using it for years.

@httpete True, since mid 2020, but it's not the problem.

[siriwatknp]

No it wouldn’t, css gap works fine with flex box, been using it for years.

gap works with flexbox but it does not work for the Grid component API.