Rebuilding an aspect ratio grid

hi there,

currently trying to ditch off toolset completely which seems basically possible with the latest GB evolutions regarding post and archive views. nevertheless running into minor trouble :slight_smile:

having a post grid from toolset which is based on css-grid is not that easy to rebuild with generateblocks. in principle it works flawlessy, but:
theres an issue to get the grid items to a (working) strict square ratio.

basically the grid item has an outer container with background image set to ‘featured image’. within is a centered headline that contains the ‘title’.
opacity of headline is set to zero in normal state - upon hover the title fades in and the image fades out. great so far.

the trouble begins when trying to achieve the square ratio of the grid items… none of the usual known tricks seem to work to full extend.
but as i am not the major coder and neigther as good to flexbox-knowledge as i like to be - there are maybe some pros here that have a better undestanding and probably a solution for this:

i’ve got two approaches so far that ‘might’ work in some way:

  1. working with min-height for the item container.
    although that allows the inner headline to be perfectly centered always over the image, this wont work well tbh. reason: the grid item may take a width from something about 300px wide up to over 600px wide - so its nearly impossible to maintain an even close to square ratio.

  2. set the item container to square with the padding-top 100% value. great. container always perfectly square. downside: the inner headline gets pushed out of the container. can be fixed with some negative margins so far, but no chance getting it centered perfectly again … even worse the title might break into two or three lines on occasion.

so the question behind all this is:
is there any way to achieve the same as with css-grid using flexbox? something that i am not aware of or is far from my knowledge?

thanks for any hint in advance :slight_smile:

Hi @dasigna,

Can you share the link where we can see your current structure for this Grid for reference?

hi @fernandoazarcon2 ,

sure - just look at this page for the big instance of the grid.
upon klicking any of the items you’ll see the smaller instance at the end of the page (related posts).

this is the current grid structure fromm toolset which is intended to be replaced.

Have you created one from GenerateBlocks?

You can probably add a class to the certain Block you’re want square all the time, and then use that class as a target for custom CSS.

aspect-ratio: 1/1;

for instance.

1 Like


wtf - @fernandoazarcon2 you made my day!
thanks for giving my old brains some push.

had this some times ago as far as i remember, but abandoned then due to lack of satisfying browser support. must have gone out of my mind again …

and of course it works like a charm. have to check if browser support is o.k. now.

big thanks for the nudge :orange_heart:

1 Like

You’re welcome! Glad that worked!