I’m trying to use the layouter to display a row of five items on desktop; which will wrap into a second row when the items can no longer fit on the screen. Since I have an uneven number (but I want them to display proportionally), I had to set a minimum width on my stacks. I have this section looking decent at each breakpoint with a few exceptions: the low-end of desktop and the high-end of tablet. I know I can just create a new breakpoint but that would mean I have to finesse yet another breakpoint; which would also defeat the purpose of using the layouter in the first place. I know I could also achieve the desired effect with a grid structure but it wouldn’t be as responsive right out of the box and it would require more work at each breakpoint… So, ultimately, my question is, how can I get the layouter to break into 2 rows rather than spill out of the container and off the screen on desktop?
Also, would it be possible to request the ability to tell layouter how to display content based on the desired number of columns/rows? This would help the arbitrary display on the high-end of the tablet breakpoint. In this case, I want it to display row 1, 3 column / row 2, 2 column. Thank you!
Hey Maggie,
In order for the Layouter to wrap at certain point, you can set a min width to its items. This way when there’s not going to be enough room for them, it’ll wrap.
If you want to have more control over the amount of items in each row, you can try and change the Layouter layouts between breakpoints. For example have the layout set to ‘row’ on desktop and only on tablet change it to Mosaic.
BTW you can add additional breakpoint for the Layouter and have the rest of the design taken from desktop or copy it from smaller breakpoints (right click → copy from breakpoint).
Hope this helps
Well, as I said, I already have a minimum width on the stacks nested in each item. However, when I tried to set a minimum width to the item itself, I get a message saying I can’t. I already have it set to row on desktop (which is probably the real answer to my question re: wrapping). Also, I discovered that I can add additional breakpoints to sections but as you can imagine, that could get out-of-control quickly. Ultimately, my goal is efficiency and consistency – it already takes a decent amount of time to adjust each breakpoint so adding another isn’t a great solution.
Anyway, I ended up sort of solving my problem by changing the range of my tablet breakpoint. It’s still not the most elegant solution (or particularly efficient) but I guess it’ll have to do for now… thank you.
