Grid Cells in Layouter

Hey,

I was wondering for a long time now, why the layouter don’t have a grid cell layout like the repeater?

Bricks layout is very problematic, it dose have auto wrapping, but you can not make the items stretch as it should (i.e in css flex stretch and wrap correctly but not in layouter bricks layout)

I find it odd as the grid cells layout in a repeater is absolutely wonderful, but it only works in a repeater layout which is a shame.

What are the reasons for not having grid cells layout in layouter?

1 Like

Hey @a-bezalel ,
I’m Liron from Editor X product team :slight_smile:
You can achieve the Grid Cell layout with Layouter by using the Mosaic layout. When Bricks items size is precise and this layout allow you to control the items alignment and spacing.

The Mosaic items stretch and fill the entire space like Grid Cells , and allow to control the gaps size. to control the wrapping don’t forget to ser Min-Width to the items.

Best Regards,
Liron

Hey @lironm sorry for the ultra late replay, never got a notification for this post
(or maybe i just missed it)

Anyway, I know I am late for the party here since you moved on to studio,
But unfortunately this is not a solution at all, as the main reason for this post is the ability of the grid cells to wrap automatically without the use of breakpoints and fill in the parent container at the same time.

Using your method makes it looks like a grid visually, but it dose not function like one which is the important part. When setting an item width in % it can never wrap by itself, as the % is always relative to the parent component current width.

Even when setting items to % and adding minimum width to each item in pixels (as you suggest), the component still have ugly spaces in the sides, since ultimately it’s still using % as the main drive for each item size. trying to set the width to 100% so it will fill in the whole component result in no wrapping, again, the main issue.

Grid cells in layouter have the option to set minimum and maximum width in pixels and so they wrap automatically without the use of any breakpoints, but most importantly they also fill the parent container beautifully in any viewport size.

I think grid cells is one of the most convenient layouts to use in many scenarios (especially for big layouts like hero folds and such), and it works really well, but having it only in a repeater form, and not in a layouter form as well, is very limiting and a big shame imho. since a repater have the same layout in all items, which is not something a user might want.

Using a grid cell in layouter form will allow to build complex websites without ever touching breakpoints (if one desires) but still have full control over the layout.

please see attached video in the link to better understand my meaning

(sorry can’t seem to find a way to directly upload a video in the post)

thank you