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