Autoplace Cell in Grid

[PhilTone]

Hey there,

I’m trying to achieve following layout:

Basically I am feeding the grid with images that are placed in a post. That works fine already.

What I want to achieve is that the headline and bulletpoints jump up if the cells on top of them are not filled.
So if I add just 3 images, for example, the headline and bullet points appear right under those 3 images.

Is something like that possible with grid? I’ve managed to create the grid and gave the lower 2 cells with the headline and the bulletpoints following parameters:

headline:
X Start: 1
X End: Span 7

Y Start: Auto
Y span: 4

bulletpoints:
X Start: 8
X End: Span 5

Y Start: Auto
Y span: 5

My thought was that if the cell above had no content the “Y Start: Auto” would place the next cell in its’ place.
Right now it’s not working and I’m asking myself if something like this is possible… that would be pretty awesome.

[PhilTone]

Is my question too special?

[christian]

Hey @PhilTone,

I believe that is possible but the construction of it would be a bit tricky so I’d recommend you learn how to use the Grid element from your Youtube videos here https://www.youtube.com/watch?v=Q7XuYdxhuJY&list=PLWPh_GoP7hYXHrOv3sYUNQ5mVeApTnkO2

You can also learn from the preset grid layouts you’ll see when you first add a Grid element into the section.

Hope that helps.

[PhilTone]

Yes, I’ve watched the videos and my inspiration was basically this part of this vide:

Basically, if i break it down, my question is: if I set the Y Start value to auto but have the X Start value fixed, can I still somehow achieve that same effect, that new cells jump into place?
Right now my problem ist that they don’t jump up to the last cell above but to the start of the cell left to it (see screenshot)

[christian]

Hey @PhilTone,

The X value must also be auto. That’s also the setting in the tutorial video.

[PhilTone]

That’s not what I want - I want the right cell to stay in it’s X-Axis but just to jump on the Y-Axis.

[christian]

Hey Phil,

I see. In that case, it might be complex if not impossible to achieve what you want. It looks like CSS Grid can’t support that. You’d probably need a custom CSS and JS combo. Regretfully, we can’t provide that as part of our theme support.

You might want to check with our Elite team to see if they can build you a custom feature.

Thank you for understanding.

[PhilTone]

Alright, thx for looking into it.

I’ve worked around the problem by just creating a grid for each Column. That way the text/bulletpoints just fall into place once the image above is missing.

[ruenel]

You are most welcome.