Is there a way to create a react-grid-layout with 100 grid points width, while ensuring that the grid items do not overlap?
https://i.sstatic.net/CQiVh.png
(Reducing the number of columns can prevent overlap, but sacrifices the 100-point width resolution for grid placement)
import Button, { ButtonProps } from '@mui/material/Button';
import GridLayout from 'react-grid-layout';
const TempButton = (props: ButtonProps) => (
<Button
{...props}
variant="outlined"
sx={{
width: '100%',
height: '100%',
'&:hover': {
backgroundColor: 'primary.dark',
opacity: [0.9, 0.8, 0.7],
},
}}
/>
);
export const DeckLayout = (props: any) => {
const layout = [
{
i: '1',
x: 0,
y: 0,
w: 2,
h: 2,
},
{
i: '2',
x: 2,
y: 0,
w: 1,
h: 1,
},
{
i: '3',
x: 3,
y: 0,
w: 2,
h: 3,
},
];
return (
<GridLayout className="layout" layout={layout} cols={100} rowHeight={10} width={500}>
<div key="1">
<TempButton>1</TempButton>
</div>
<div key="2">
<TempButton>2</TempButton>
</div>
<div key="3">
<TempButton>3</TempButton>
</div>
</GridLayout>
);
};
Explore this sandbox
Edit: It seems like the issue might be related to CSS. Modifying the stock example shows the expected behavior:
https://i.sstatic.net/7gkhb.png
Check out the sandbox