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
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:
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.
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