Team Page - Dymanic Content with ACF

Is there a way to add a responsive row to the Grid Element so that it expands the height of itself to fill the available space within the column that the grid is placed inside. Like this:

Screen Shot 2022-05-16 at 5.37.31 PM

I want that row (row 2) to expand vertically and push rows 3 and 4 down to the bottom of the column that the grid is in.

This is a 3 column layout and the quotes in side vary in length increasing the height of the parent height I want the photo and the attribution to line up at the end (vertical) of the column.

I tried setting the rows in the grid to:

auto 1fr auto auto

but the 1fr seems to only expand when it is the first value in the sequence.

I’ve been pouring over videos trying to find some ideas, I’m hoping one of you can help with a creative solution to this.

Hey Jacob,

Regretfully, without the URL of the page where we can see the structure of your layout, we can’t recommend a solution.

Just to answer your question:

Yes, you can add a Row element to the Grid’s Cell.

Thanks.

Sorry if I was being vague, this is where the names of things get confusing.

I have a small layout in a page that uses the “Grid” Element that is placed inside a Column, inside a Row.

There are 3 Columns in that Row at Desktop sizes.

Each of those Columns has a Grid in them with a Testimonial style layout.

My challenge is that the Quotes, and the persons Title, vary in length causing the Grid element to grow or shrink based on the content inside it, while all of the Columns they are placed in become uniform in height to match the tallest individual column in the row.

The Grid itself is sized in “columns” and “rows”. I was not looking to add a Row Element into the Grid Element, but rather define a row in the grid layout that naturally fills all the available space in the parent Column.

I want to push the Quote to the top of the column, and the Photo/Name/Title to the bottom of the Column, when it can.

I should also apologize because the title of this Topic is not the right one, it must have been leftover from a question I had previously that I figured out on my own.

Is there a way to change the title?

Hey Jacob,

Thanks for providing the page URL. I tested adding more text using the browser tools. Please clarify if you want Photo/Name/Title to stick at the bottom of the Cell (Column)?

If so, it’s tricky if not impossible to achieve with your current setup. It would be easier if you used the Row element for the 3 column layout then inside it, you just have the Text, Headline and another Text element. The Headline element will hold the Photo and Name.

If you have that Row setup, you just need to follow the Bottom Align Elements tutorial here https://youtu.be/fAh6cutvdSc

Hope that helps.

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.