Advice on best way to do equal height on this
https://sflece.net/ -- looking for some advice on this (the coming soon area).... I wanted to have the image/ece/nonprofit text equal in height to Coming Soon, bottom text area. I went with Grid, but had to use JavaScript to get equal heights on resize... what's a better/right way to do this? As you can see it's a mix of images and text and needs to be responsive...(long time listener, first time requestor of help)
3 Replies
I'd look into adding rows to your grid. You only have template columns defined.
Then you have a left and right container inside which are also both grids, so maybe look into subgrid to align their row templates with a parent-defined row template.
This isn't done, I ran out of time before having to leave my computer. Our application doesn't ever really use images so this messed me up as the images seem to be making the left div wider than the right div even with the parent being set to either
grid-template-columns: repeat(2, 1fr); or grid-template-columns: repeat(2, 50%); but maybe you can poke at it a bit.
https://codepen.io/Chris-Rowe/pen/abrOYYKif you go this route, be aware of roughly 88% compatibility if that's a deal-breaker
lastly, here is Kevin's YT video on it https://www.youtube.com/watch?v=IIQa9f0REtM&pp=ygUUa2V2aW4gcG93ZWxsIHN1YmdyaWQ%3D
Kevin Powell
YouTube
Easy and more consistent layouts using subgrid
Grid is amazing, but it has it's limitations, many of which are solved with subgrid! Subgrid is only currently supported in Firefox, and this video is part of my Subgrid Awareness Month where I'm looking at raising the profile of subgrid and getting people excited by it!
š Links
ā
New to grid? Start here: https://www.youtube.com/watch?v=v5KzBP...
Thanks, I was starting to looking into subgrid... I will expore this a bit... Much thanks for responding...
well, I got closer with subrid https://sflece.net/, but still not 100%