Always show square images in grid

Hi Hans-Gerd,

To clarify, are you referring to removing the curves on the Containers?

If so, there's a Border Radius set on the Container Block. You can remove this. Reference: https://docs.generateblocks.com/article/container-overview/#border-radius

If you're referring to something else, let us know.

Hi Fernando,
thank you for the quick reply.

Sorry, maybe I expressed myself wrong: The rounded corners should remain in any case, i.e. the entire container with the image should always be square.

Cheers,
Hans-Gerd

I see. Remove the empty Container Block for the spacer.

Remove the min-height you have set for the parent Container as well.

Then, add this CSS through Appearance > Customize > Additional CSS:

.gb-grid-wrapper.raster_ansicht > .gb-grid-column > .gb-container .kachel_blog{
    aspect-ratio: 1 / 1;
    height: auto;
    width: 100%;
}

.gb-grid-wrapper.raster_ansicht > .gb-grid-column > .gb-container .kachel_blog > .gb-inside-container{
    height: 100%;
    display: flex;
    flex-direction: column;
}

.gb-grid-wrapper.raster_ansicht > .gb-grid-column > .gb-container .kachel_blog > .gb-inside-container > :last-child{
    margin-top: auto;
}

This will force it to be square all the time.

You can also opt to wait for the upcoming update for GB which could come out hopefully by the end of the month. This new version has more settings. Theoretically, less CSS should be needed. Probably just this line: aspect-ratio: 1 / 1;

Hi Fernando,
thanks again for the quick reply.
I still have to look at it in calm, implement it and then I will report again.

Cheers,
Hans-Gerd

Hi Fernando,
that works wonderfully now. Thanks again for the great help. 🙏

Cheers,
Hans-Gerd

You're welcome, Hans-Gerd!

Hi Fernando,
sorry, but I have another question, because unfortunately this does not work in the following case. You can see in the screenshot that depending on the viewport, the highlighted area is shown above the square (308.63px in the example ), so that overall there is no square view. I suspect that this is due to the container ("Eisenversorgung ..." with the button below it) inside the element, which has a white transparent background.
The height of the upper area also varies depending on the width of the viewport (in the example it is 1046px).

(please see here: https://test3.haurand.com/beispiel-slider/)
Do you have a solution for this as well?

Cheers,
Hans-Gerd

Can you reshare the link to that page? The page shared doesn't exist.

sorry, this is the correct link: https://test3.haurand.com/beitrag-slider-sicherung/

Give the kachel_blog Container Block a different class:

Example, if the class is kachel_blog2, the code for that would be:

.gb-grid-wrapper.raster_ansicht > .gb-grid-column > .gb-container .kachel_blog2 {
    aspect-ratio: 1 / 1;
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

Hi,
thanks a lot for answer, but unfortunately ist doesn't work, see here:

Cheers,
Hans-Gerd

I see. The column width is restricting the width.

Can you remove the previous code you added here?: https://generatepress.com/forums/topic/always-show-square-images-in-grid/#post-2533716

Give that Grid Block a new different class as well. Let's try to re-do it.

Hi,
thanks - I have assigned the CSS class raster_ansicht_2 to the grid. The right container has an additional CSS class kachel_log (I have changed this temporarely for now).

Cheers,
Hans-Gerd

Try this:

@media (min-width: 769px) {
    .gb-grid-wrapper.raster_ansicht_2 > .gb-grid-column {
        width: unset;
    }

    .gb-grid-wrapper.raster_ansicht_2 {
        flex-wrap: nowrap;
    }

    .gb-grid-wrapper.raster_ansicht_2 > .gb-grid-column:last-child {
        flex: 1 0 33%;
    }
}

.gb-grid-wrapper.raster_ansicht_2 > .gb-grid-column:last-child > .gb-container {
    aspect-ratio: 1/1;
    height: auto;
}