mantine grid like masonry

Hi ladies and gentleman :)

I´m building an react app. There I want to build a grid like masonry with mantine. The width and the height of the components that are shown, have to be autofill the grid, without space (so like on masonry). Is it with mantine possible?

There is an additional task, that the components have to be displayed or displayed. Depend on the selected Components, the grid is autofilling the grid without any space. That would be the perfect solution.

An prefered solution looks like:

I tested some settings of mantine grid, like SimpleGrid and ...

1 Answer

If you go by default on mantine grid that's not possible because of the <Grid.Col> will take the same height as its row siblings. What I recommend is going for 6 columns and using the Cards with different heights but still, you will have some issues with responsive in this case, use the mantine responsive hook to check the page width.

1

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password

Post as a guest

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

You Might Also Like