Unstable_Grid2 (MUI 5) vs Grid2 (MUI 6) - Gap implementation

[mauro-ni]

Hi folks,
I'm writing about Grid2 and a difference found between the implementation on MUI 5 (Unstable_Grid2) and the implementation on MUI 6 (Grid2).

We own a license of MUI X Premium (Order ID: 97630), hope you can answer to this question.

MUI 6 (https://mui.com/material-ui/react-grid2/#how-it-works)

It uses the gap CSS property to add spacing between items.

MUI 5 (https://v5.mui.com/material-ui/react-grid2/#how-it-works)

It uses negative margins and padding to create gaps between children, which behave similarly to the gap CSS property.

I'm using Grid2 in an application with a complex form (a wizard with around 180 fields).
The form is data-driven in the sense that each field is defined in the database and is associated with rules that determine whether it is active, mandatory, deactivated, ...
For each field, display options are also defined, including for example the space used (Grid2 size property) and if a line break before / after it is required.

The front end ask the back end for the list of fields (graphql), iterates on the fields list and renders each field.

The problem I have is related to the line break implemented through the following GridBreak component:

import { Box } from "@mui/material";

function GridBreak() {
  return <Box width="100%" />;
}

export default GridBreak;

Example:

<Grid2 container spacing={2}>
  <Grid2 size={3}>
    // field 1
  </Grid2>
  <Grid2 size={3}>
    // field 2
  </Grid2>
  
  {/* Force break */}
  <GridBreak />

  <Grid size={3}>
    // field 3
  </Grid>
</Grid>

This solution works well in MUI 5, but has a problem with MUI 6 due to the fact that the new implementation use gap property in grid container.

Is it possible to opt in for MUI 5 gap implementation?
Is there a way to avoid this problem (setting negative margin to equals to GridBreak doesn't work)?

Many thanks in advance for your help and for such great library.

Mauro

Search keywords:

[DiegoAndai]

Hey @mauro-ni, thanks for reaching out!

You can have a forced break by adding an empty grid item whose size is the same as the remaining columns. Here's a live example: https://stackblitz.com/edit/react-a27w23?file=Demo.tsx

Is this what you were looking to achieve?

[mauro-ni]

Hi @DiegoAndai , many thanks for your reply.

I know that it is possible to force the break by adding an empty grid item whose size is the same as the remaining columns, but this approach requires to know the remaining columns.

As I said, I build the wizard form by iterating on the list of fields.
The form is dynamic: there are fields whose presence is conditioned by the value assumed by other fields, therefore it is difficult to calculate the remaining space on the line.

Is there a way to force grid break adding css on the last element in the row (I'm not a FlexBox expert)?

Is CSS Grid Layout more flexible? Why isn't Grid2 implementation based on CSS Grid Layout?

Many thanks.

Mauro

[DiegoAndai]

Hi @mauro-ni, sorry for the delay.

Is CSS Grid Layout more flexible? Why isn't Grid2 implementation based on CSS Grid Layout?

The usage of CSS Grid Layout and Material UI's Grid2 (and Grid) is different.

As you mentioned, CSS Grid Layout is designed to be very flexible.

Material UI's Grid 2, instead, is designed to have a fixed number of columns for speeding up development, sacrificing flexibility. This allows for a faster developer experience for common use cases.

Depending on how much you value flexibility vs. speed, you might be able to decide which fits your use case better.

I know that it is possible to force the break by adding an empty grid item whose size is the same as the remaining columns, but this approach requires to know the remaining columns.

I've updated the workaround to use a Box component with flex-basis: 100%: https://stackblitz.com/edit/react-a27w23?file=Demo.tsx

Does this work for you?

References:

• https://tobiasahlin.com/blog/flexbox-break-to-new-row/
• https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

[mauro-ni]

@DiegoAndai many thanks for your reply.

WIth Box and flex-basis: 100% I get an extra margin.

I solved adding nested Grid2 containers, not a perfect solution, but it works.

Demo: https://stackblitz.com/edit/react-a27w23-tmujrlyt?file=Demo.tsx

Thanks again,
Mauro

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@mauro-ni How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.