Streaming live at 10am (PST)

Uneven Rows in CMS grid


#1

I am having trouble with a 3 column Dynamic List grid on my Projects Page. 2 and 4 column work. The 3 column is uneven. All my thumbnails are the same size. What am I doing wrong?

Share Link


#2

The grid breaks when the text goes on 2 lines.

Either use Flexbox on the Dynamix list element, or define a min-height on the item element.


#3

So is the reason it doesn't break with 4 columns is that all the items have 2 lines? As far as what you offered as solutions, I am not quite getting it due to my general ignorance. The Dynamic List is placed in a Tab. Are you saying to make the Tab a Flexbox? When you say define a min-height on the item element...I'm confused on what the exact item element is. Sorry, have to learn it sometime, I guess.


#4

Yes.

In the video below, I show you successively the flexbox solution, then the min height solution

https://v.usetapes.com/z2yhOMydJc

When your text pass on two lines the block where it is is taller than the other, this makes a normal float grid breaks.

Using Flexbox, it solves it because flexbox is made for that and can deal with some irregularities of the grid.

As for the min height solution, this is a bit barbaric, it's like saying "okay, then let's make all the boxes of the grid as tall as the taller of them, so the grid doesn't break".

Exactly, and don't be sorry. We wouldn't be answering at all if it wasn't needed. The thing is, on this topic, you're not learning Webflow things, you're learning HTML and CSS. What you get used to here are web concepts and you'll be able to use them outside of Webflow. Don't hesitate to google those CSS concepts (min height, flexbox). The better at HTML and CSS you'll get, the better at Webflow you'll get too. Webflow is only a UI (well not only but in that case, only. A brilliant one :slight_smile:

If you come here with your sharing link, politeness and patience, you'll get whatever the help you need I'm sure.


#5

Vincent, thanks for your reply and video. My apologies for not thanking you sooner. I had to detour away from online jobs on have just now been able to get back!


#6

Don't worry that's okay :slight_smile: Nice of you to come back :slight_smile: Have you sorted all your issues on that project?


#7

Not yet. Have to put together a rush job for another client...all while learning as I go. I will be able to get to it either tomorrow or Wednesday. Thankful for this forum!


#8

This topic was automatically closed after 60 days. New replies are no longer allowed.