Grid Container Questions

Hi there,

Watched your video, so for question 1:

It will require some custom CSS. You can add an additional CSS class to the Grid block, for example: product-grid, then add this CSS:

.product-grid > .gb-grid-column > .gb-container >.gb-inside-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.product-grid > .gb-grid-column > .gb-container >.gb-inside-container > *:last-child {
    margin-top: auto;
}
.product-grid > .gb-grid-column > .gb-container > .gb-inside-container {
    height: 100%;
}

For question 2, it’s because you have 10pxtop margin for each container under the Grid(Featured specials), once you remove the top margins, the issue should be fixed:
https://www.screencast.com/t/zefbBSFT4

Let me know ??

Thanks Ying, that’s brilliant. While we’re on the container topic, can you suggest a way to shorten a container or raise the bottom edge?

See the bottom right of screenshot for explanation: https://nimb.ws/SbxJXr

While selecting the Grid block, try to set its vertical alignment to top instead of default??
https://docs.generateblocks.com/article/grid-overview/#vertical-alignment

Let me know if this helps ??

Hi again Ying, similar to my original question in this thread, is it possible to fix a container at a specific height, then set the spacing around (space-between?) any elements in that container so they remain consistent even if content is added or removed.

Trying to make this easy for a client to manage and not have to deal with adjusting paddings when content changes. ??

Here’s a screenshot for clarification: https://nimb.ws/UPAnI9
And the URL: https://3sternstaging.com/

Thank you!

Try this CSS:

.gb-container.product-grid {
    height: 402.44px !important;
}
.gb-container.product-grid > .gb-inside-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

402.44px is the current containers’ height on its left.

Hi Again,

The product grid / grid column custom css works well when the images inside each container are uniform, but not so well when the images are different sizes.

See the “Best Selling Air Purifiers” section on this page: https://3sternstaging.com/

If I vertically align the content to “Default,” the containers are the same height, but the product titles don’t align. See: https://nimb.ws/gQSPEw

If I vertically align the content to “Bottom,” the titles align but the containers are different heights. See: https://nimb.ws/EiUKcZ

Is there a way to have the containers the same height and the titles on the same line, even with different image sizes? So some padding/margin would be added below the image automatically?

Thank you!

Matt

Hi there,

It’s certainly possible but you’ll have to keep the vertical alignment to “default”.

You then place both the name of the product and the price of the product on a container Block that will serve as its wrapper.

On this Container block wrapper, add “gb-product-info” on its Additional CSS class(es) field.

You then add this CSS:

.gb-product-info { margin-top: auto; }

This should align the product info.

Thanks, Elvin. That worked. Is it possible to automatically vertically align the image either centered or to the bottom (just above the title)?

I know it could be done with padding manually, but trying to make this easy for the client!

See screenshot:

https://nimb.ws/l3TACS

Thank you!

Matt

You have this CSS:

.product-grid > .gb-grid-column > .gb-container >.gb-inside-container > *:last-child {
    margin-top: auto;
}

Change it to:

.product-grid > .gb-grid-column > .gb-container >.gb-inside-container > *:first-child {
    margin-top: auto;
}

And remove this:

.gb-product-info {
    margin-top: auto;
}

Hi @sterndesign

This thread has been marked as resolved due to a lack of activity.

You’re always welcome to re-open this topic if you need more help.

Thanks!