Set individual custom column width with react-masonry

Question

We can use react-masonry to generate the grid as outlined in the documentation: https://mui.com/material-ui/react-masonry/

This will however give that the column has equal widths. E.g. in case of 3 columns we have 33% for each, for 2 columns 50% each etc.

How can I adjust the individual column widths instead, e.g. to have the first column 25%, then 50% and then 25% again instead of 33%, 33%, 33% in case of three columns?

Answer 1

By reading its code I don't think any given width supported.

const width = `${(100 / columnValue).toFixed(2)}%`;

https://github.com/mui/material-ui/blob/6885bab168275b8fd4dadb489a4f94c4f59ce53b/packages/mui-lab/src/Masonry/Masonry.js#L99