Streaming live at 10am (PST)

Two columns Masonry Grid / CSS + JavaScript - RESOLVED

#1

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?

Here is a work in progress attempt, but it doesn’t work as I want to:
https://preview.webflow.com/preview/majakarmen?utm_source=majakarmen&preview=1c97e56b8b03e302f53761aad0ea0f4c

Any suggestions?

Thanks in advance.

#2

Here is a video showing you how to achieve this in a few simple steps! :slight_smile:
CloudApp

1 Like
#3

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.

1 Like
#4

@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.

#5

@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?

1 Like
#6

@Noah-R I’ve just followed your steps here:
https://preview.webflow.com/preview/majakarmen?utm_source=majakarmen&preview=1c97e56b8b03e302f53761aad0ea0f4c

Can’t find solution fot the white gap between divblocks yet. There’s no any bottom margin.

I want something like this (just a quick montage):

Thank you for your kind help, not leavin’ me :slight_smile:

#7

@Noah-R How about this idea, adding a specific selector to each particular divblock and ajdust the absolute position:

It doesn’t seem to me so smart. There must be something better :confused:

#8

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.

<style>
  .elip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }
</style>

Once you have done this and your cards are looking a lot more even, this will minimize that white space underneath the next card etc.

I really hope this helps you out!
-Noah

1 Like
#9

@Noah-R Looks like I’ve finally found exactly what I need:
https://forum.webflow.com/t/webflow-masonry-grid-pinterest-no-custom-code-required/23551

:hugs:

Thank you so much for everything you did. I can’t say enough how important your support is for me. I’ve learned a lot from your posts.

I wish you all the best

1 Like
#10

Ahh yes… that will definitely work! Little more of a set up with custom if you feel comfortable with that :slight_smile: 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!

1 Like
#11

Hi,

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 ?!

Support is partial https://caniuse.com/#feat=multicolumn

Just found the original article I read https://www.smashingmagazine.com/2019/01/css-multiple-column-layout-multicol/ . Rachel Andrews says

MASONRY-LIKE DISPLAY OF CONTENT

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.

1 Like
#12

@HammerOz thanks a lot.

Your contributions are exactly what I need, especially this one on getting the ability to order masonry divblocks left-to-right.

Yes, a small bit of JS have to be added. I’m testing now both column and grid option, I’ll be back in a while with the upshots.


Easily, the best thing I’ve learned on this forum is how to appoint something, how to say what I really want in the web design jargon. :wink:

1 Like
#13

It works perfect with text column settings, but sure doesn’t support left-to-right divs floating:
https://preview.webflow.com/preview/majakarmen?utm_source=majakarmen&preview=1c97e56b8b03e302f53761aad0ea0f4c

Again, that was also @sabanna’s solution here: Webflow Masonry grid ( #Pinterest), no Custom Code required

Yes, @HammerOz “It seems weird these properties are text properties in webflow as they seem to have broader CSS impact than that ?!”

Continue to work on, testing some CSS Grid Layout + JavaScript properties.

#14

Hi @Noah, @HammerOz and @sabanna ,
following the steps here: https://w3bits.com/css-grid-masonry/

making it adapt my two columns need, it works PERFECT now:
https://majakarmen.webflow.io/home-test

I’ve put an ordinal number in each item’s title that you can track the order of loading.

And now I just need to adjust it fine to look really good. :sunglasses:

Thank you again for all of your support.