[Resolved] Post Archive grid column height equal and button block anchored to the bottom

[Jason]

There are many topics on this, and I’ve been through most of them. I just keep missing some key component, and for some reason none of them are working for me… Forgive me for opening another topic on this – I have a custom post archive that is 3 columns. I need all columns to be the same height and the buttons block to be anchored to the bottom. Thank you for your time

Example Here

[Ying]

Hi Jason,

In order to make the CSS simpler, it’s better to change your current structure which is:

- container 
   -- container 
     --- container (bg image)
   -- container
     --- Headline (h3)
     --- link
     --- Headline (p)
     --- container 
     --- buttons

to:

- container 
   -- container 
     --- container (bg image)
   -- container
     --- Headline (h3)
     --- link
     --- Headline (p)
     --- container 
   -- container
     --- buttons

Then add this CSS:

.generate-columns-container  .dynamic-content-template > .gb-container>.gb-inside-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.generate-columns-container .dynamic-content-template, .dynamic-content-template > .gb-container {
    display: flex;
}

.generate-columns-container .dynamic-content-template > .gb-contaienr >.gb-inside-container >*:last-child {
    margin-top: auto;
}

[Jason]

Ying, you are crushing it for me, today. thank you So much! One thing – your method works, but it brings the other blocks down in the container down – perhaps the “justify-content” attribute? How would I keep all the blocks towards the top of the container and the button block on the bottom? Thank you

[Jason]

Never mind – This result is perfect and I’m moving on. Thank you again! Really appreciate your help!! You guys rock

[Ying]

Glad to hear that 🙂

[Author]

Posts