Material UI GridList drop down is too wide

Question

I'm trying to create a menu / drop down in Material UI that is in the shape of a grid. The drop downs I've seen in the documentation are either a single column or a single row. I've taken a stab at this using a menu component that contains a GridList and this almost works for me but the grid is too wide and there is too much space between the columns. I've tried using GridListItem and Grid container and GridItem but I've ended up with the same issue.

   <Menu
        anchorEl={anchorEl}
        keepMounted
        open={open}
        onClose={handleClose}
        elevation={0}
        getContentAnchorEl={null}
        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
        transformOrigin={{ vertical: "top", horizontal: "left" }}
        TransitionComponent={Fade}
      >
        <GridList cellHeight={48} cols={2}>
          <Button onClick={(e) => handleClose(LayoutIcons.L_1x1)}>
            {GetGroupIcon(LayoutIcons.L_1x1)}
          </Button>
          <Button onClick={(e) => handleClose(LayoutIcons.L_2x2)}>
            {GetGroupIcon(LayoutIcons.L_2x2)}
          </Button>
          <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
            {GetGroupIcon(LayoutIcons.L_5x5)}
          </Button>
          <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
            {GetGroupIcon(LayoutIcons.L_5x5)}
          </Button>
          <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
            {GetGroupIcon(LayoutIcons.L_5x5)}
          </Button>
          <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
            {GetGroupIcon(LayoutIcons.L_5x5)}
          </Button>
        </GridList>
      </Menu>

CodeSandbox for sample grid drop down

After digging into this I found that the width of the grid is the sum of all the element widths because it's using flex as the display (in my example code it is 6 but my solution requires a general grid of any number of elements and columns). The grid then sets the width of each element based on the number of columns. I have 2 columns so each element width is set to 50%. This provides 2 elements per row but makes each element very wide.

I am looking for a Material UI solution to tighten the element width so each item is as far apart as when I set the number of columns to 6 in my example code. I'm fine with adjustments using GridList or Grid or a completely different approach as long as it is using Material UI components.

Answer 1

Use block elements such as div. Close each row in another block element. Add margins if you need more spacing

<div>
  <div>
    <Button onClick={(e) => handleClose(LayoutIcons.L_1x1)}>
      {GetGroupIcon(LayoutIcons.L_1x1)}
    </Button>
    <Button onClick={(e) => handleClose(LayoutIcons.L_2x2)}>
      {GetGroupIcon(LayoutIcons.L_2x2)}
    </Button>
  </div>
  <div>
    <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
      {GetGroupIcon(LayoutIcons.L_5x5)}
    </Button>
    <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
      {GetGroupIcon(LayoutIcons.L_5x5)}
    </Button>
  </div>
  <div>
    <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
      {GetGroupIcon(LayoutIcons.L_5x5)}
    </Button>
    <Button onClick={(e) => handleClose(LayoutIcons.L_5x5)}>
      {GetGroupIcon(LayoutIcons.L_5x5)}
    </Button>
  </div>
</div>