What elements use (columns, flexbox, grid…?) to get a layout like this one:
where each divblock in the two columns moves/floats one under another chronologically, depending on the content itself rather than on a strong grid structure with the equal height?
Dear @Noah-R , your help is wonderful, so fast, so clear … although I can’t hear (I am a lips reading deaf) your voice with detailed explanations (vibrations that I feel through my laptop). I would appreciate a lot if you would write me down the basic steps.
Anyway, I think I’ve got your motion just seeing the cursor movement. I’ll try to apply it in this way.
Thank you very much.
@Noah-R, please - there is an empty space remained below the first divblock. How to avoid it, i.e. how to place the third divblock immediately below the first one, without any white between?
I’ve grasped your suggestion about using the dynamic list, thank you.
@Karmen Just remove the bottom margin on the those cards! The space has to be coming from them I assume. If not, can you please post a new read-only link?
I see what you mean… The white space underneath the first article card. This is coming from the second image being taller. So in code it’s reading from left to right. This means that the row wraps underneath. It won’t push into the row above it. Now in my personal opinion, that white space is fine. It’s not a bad thing.
The only other way to solve this is to make two columns and do it that way or set the flex div to Vertical (not recommended because you would have to give the flex div a set height which will cause other layout issues).
What you can do to get the cards an even height is add an elipsis to the preview text so every card has the same amount of text. You can do this with the code I have posted below.
Just add the class of .elip-text to the text description text on the card in Webflow and it will only display however many lines you tell it to in the CSS as show below.
Ahh yes… that will definitely work! Little more of a set up with custom if you feel comfortable with that If so then yes that’s the way to go! And thank you so much! Glad I could be some help! Best of luck with your project!
I have not seen much mention of the text column properties, but it might be another option worth trying. I came across it a week back somewhere.
Change the part container that is flex to block and change its text properties to 2 columns. Then remove the 40% width on those children divs as not needed any more. Try the other column properties as well. It seems weird these properties are text properties in webflow as they seem to have broader CSS impact than that ?!
Another place where Multiple-column Layout works beautifully is if you want to create a Masonry type of display of content. Multicol is the only layout method that will currently create this kind of layout with unequal height items. Grid would either leave a gap, or stretch the items to make a strict two-dimensional grid.