Currently, I'm attempting to design a grid-shaped drop-down menu in Material UI. Most of the dropdowns available in the documentation are either a single column or a single row. I tried utilizing a menu component that includes a GridList, which almost meets my requirements. However, the grid appears too wide with excessive space between columns. Despite exploring alternatives like GridListItem and Grid container along with GridItem, the issue persists.
<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>
...
</GridList>
</Menu>
Explore CodeSandbox for a sample grid dropdown
Upon further investigation, I discovered that the width of the grid is determined by the sum of all element widths due to the use of flex display (in this case it's 6 elements). My objective is to create a flexible grid layout with any number of elements and columns while maintaining adequate spacing between items. In my current example, the two columns allocate 50% width to each element, resulting in overly wide elements.
I am seeking a tailored solution within Material UI that allows me to adjust the width of grid elements to achieve optimal spacing similar to when I set the number of columns to 6. I welcome modifications using GridList or Grid, or any other approach involving Material UI components.