Inconsistent column width using Material UI Grid with direction='column' and flexWrap='wrap'

Question

I am quite new to React and Frontend in general. I am trying to set up a MUI Grid, which lists the items in a column until it wraps around to start a new column. So far, so good, I can achieve that by setting the direction and flexWrap props.

Now the issue I am facing is that one of the items is a nested Grid container, and the column in which this item ends up, is wider than the others.

From the MUI docs or anywhere else I can't find a way to adjust column width once direction is set to 'column'.

Does anyone have an idea on how I can achieve all columns to be the same width? I'll include an example:

import React from "react";
import ReactDOM from "react-dom";
import { Box, styled } from "@mui/material";
import Grid from "@mui/material/Grid2";

const FormField = styled(Box)(({ theme }) => ({
  marginBottom: theme.spacing(1.5),
  borderRadius: 1,
  minHeight: "200px",
  backgroundColor: "yellowgreen",
}));

const newGrid = (
  <div>
    <Grid
      container
      spacing={2}
      direction={"column"}
      flexWrap={"wrap"}
      maxHeight={"75vh"}
    >
      <Grid>
        <FormField>Item 1</FormField>
      </Grid>
      <Grid>
        <FormField>Item 2</FormField>
      </Grid>
      <Grid>
        <FormField>Item 3</FormField>
      </Grid>
      <Grid>
        <FormField>Item 4</FormField>
      </Grid>
      <Grid>
        <FormField>Item 5</FormField>
      </Grid>
      <Grid container spacing={2}>
        <Grid size={2}>
          <FormField>Nest 1</FormField>
        </Grid>
        <Grid size={5}>
          <FormField>Nest 2</FormField>
        </Grid>
        <Grid size={5}>
          <FormField>Nest 3</FormField>
        </Grid>
      </Grid>
      <Grid>
        <FormField>Item 6</FormField>
      </Grid>
      <Grid>
        <FormField>Item 7</FormField>
      </Grid>
    </Grid>
  </div>
);

function App() {
  return newGrid;
}

ReactDOM.render(<App />, document.querySelector("#app"));

This results in something like this depending on window size: grid with uneven columns How can I make the columns the same width?

I tried different props like AlignItems or JustifyContent, but while using direction='column' there was little to no effect. I tried the deprecated Grid (in contrast to Grid 2), but the problem was the same there. I expected same width columns, but if there is a nested Grid container, this column will be wider. It is more noticable on smaller screens.

Peter Wang · Accepted Answer · 2024-09-18 16:05:36Z

0

Just like you put size on your nested grid elements, you need to add the size to your regular grid elements. MUI Grid defaults to having essentially 12 hidden column spaces so if you just turn each item into size={6} it'll make them all take up exactly half of the width. Here's my codebox example: Mui Grid Column Solution. Attaching the size to each grid item also allows you to remove your maxHeight as they will only take up exactly one row now. Just make sure each row's size <= 12 unless you manually state otherwise.

A possible maybe even better solution would be doing a grid like this: Mui Grid Row Solution. This allows you to choose if certain columns need to be wider. Although it does break up the easy 1-8 flow in a nice easy pattern, I'd argue the ability to dynamically select width is much better. That and even if you had a list of items like: [item 0, item 1, item 2, item 3, item 4, item 5, item 6, item 7], you should be able to do some basic array manipulation to display it in this kind of layout.

answered Sep 18, 2024 at 16:05

Peter Wang

736 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Notee Over a year ago

Interestingly, size should not have this effect per the documentation: mui.com/material-ui/react-grid2/#limitations Also this forces two columns all the time. Ideally if the screen is tall enough to fit all in one column, that column should fill the full width. I hoped to have a easier solution that I overlooked than using your row solution, which will also be a bit more complex if the elements are in different columns and rows based on screen space. Thanks!

Collectives™ on Stack Overflow

Inconsistent column width using Material UI Grid with direction='column' and flexWrap='wrap'

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related