Hi There!
I couldn’t find a setting to make the “Columns” items automatically flow into multiple lines if there’s no available space. (like what we do with flex-wrap via CSS Flexbox) is there a way to achieve this?
For example, I had 12 cards and I want them to flow into multiple lines (i.e. a grid of 4 items in each row) if there’s no space available, without having to add another “Columns” component below. See the screenshot as a reference:
Thank you
I would recommend using a Grid component in this scenario. You can do this by selecting your column component and select the grid layout instead in the Style tab.
You may need to adjust your width, margins, padding, etc. to create the grid you’re looking for. (Quick tip, you can select multiple layers at once with command + click or right clicking on the container and clicking on “select children”).
Then you’ll want to make some adjustments for Desktop, such as 25% width for Desktop with a little padding in between the images. Then you can go over to mobile view and do something like 50% to make the grid 2-wide.The specific ratios I gave are just examples, so feel free to create any styling you’d like. But this will help you achieve what you’re looking for.
Let me know if you have any additional questions!
Hi, @kara!
Thank you for the help, unfortunately, I can’t get to see the “Style” tab neither. I am on “developer” access role.
as a Reference, This is what I see when selecting the “Column” component on the dashboard:
Thank you.
Style tab is hidden when Components-Only mode is enabled. You can disable it from the space settings if it’s enabled globally, or by model in the model editor → show more.
