I have multiple elements in a grid which should fill the full width of the parent for the first few rows. Thereby, the child divs can shrink/expand. However, if there are less child divs in the last row than above, these child divs are stretched more than their siblings in the row above. How can I prevent these last divs to stretch further than their siblings above?
The last elements should have the same width as their siblings above and should shrink/expand as the user resizes the window.
The way I would deal with this is by adding the gutter (15px in your example) as some padding for the flex items.
If you are setting the flex items then to don’t shrink and 50% width (for 2 columns) you would have the desired result.
Here are some screenshots which hopefully make more sense:
Thanks for the quick reply! I thought about your solution, it makes sense. However, thereby I limit myself to having only 2 columns at max. I would prefer having 3,4,5 columns for users with wider screens.
Yes but only for desktop/tablet/mobile. Not for different desktop sizes, like a 13inch laptop and a 38inch widescreen monitor. Therefor, I want to use a flex box which dynamically adjusts the number of items within a row according to the screen width.
Ok it’s more a matter of larger breakpoint then. You could go with custom code and media queries to set this up if you want to handle larger breakpoint than the webflow’s default
It works with a flex grid, but then the items in the last row will stretch across full width as well, even though there are less items in that last row. Hence, items in the last row will have a larger width than there siblings above
If you resize the browser window from very small to very wide, there are 1, then 2, 3, 4, 5 … items per row.
The same effect can be achieved by increasing the size with CMD + and CMD - on a Mac in the browser (I guess Ctrl +/- on windows). Thereby, the number of items per row changes from very few when “zooming” in to 5+ childs per room when “zooming” out. Do you know what I mean?
I think I understand but do you have access to a very large screen like iMac? As I think cmd+/- increase and decrease might not reflect all relative units. Any screenshots would be appreciated to further understand your issue?.
Even on my 15inch notebook, I can scale my browser window from having 1 child element per row to having 4 child elements per row. With a bigger screen there will be 5+ elements per row
Basically this boils down to the question which I never figured out myself:
Can we have our flex grid system set up in a way so that the amount of elements per row can be set with min/max widths (rather than just customization for each breakpoint) and even when the last row has smaller amount of elements the width of all the elements is always the same?
I don’t think it is possible and I tried and tried.
I never thought of it this way. Thanks @dram for the boil down which make a bit more sens to me. (grid is currently being developed by Webflow and might be more relevant than flexbox)
Just an extra input if it can give you some ideas, you might try to set the flex item to shrink 0, grow 1, basis auto and set the width min and max to font-size relative unit like 30rem.
This way you will have a behaviour similar to what you are describing above when using cmd+/- but it would be hard to manage the centering of the elements though.
If at some point you figure a way to achieve this without breakpoints, I will be happy to read your solution as for now I never came across the need of such a layout.
Sorry if it took me a while to understand what you were trying to do.
And when I set the flex grow to 0 then the items will expand to more item per row on larger displays and then wrap and maintain the 300px width for individual items on lower width displays:
This preserves the width of all elements while putting as many as possible that can fit into the parent div.
Alternatively, you can also use custom css media queries to adjust the class styling applied to the flex parent or to the individual divs. Note that custom css is not rendered until the published site.
You can also adjust the spacing between items to align left or right or center or justify space between items: Screen Recording 2018-08-25...
The problem with this is that the columns won’t fill the whole width of the space they are in. And modifying spacing is also not desirable and it should stay consistent.
thats what I am looking for
