Is it possible to have a child element's height even across cards with CSS only?
I'd like to know if it's possible, with CSS only, to have the title (blue) box match the height of the biggest title box. The red box should then fill the rest of the space and the stat cards will evenly fill the red box.
Second screenshot is the goal, but is using a fixed height on the title box.
Code Pen: https://codepen.io/Maynards/pen/NWJYvzq
11 Replies
Could I possibly achieve this with Grid?
Subgrid!!
I've seen/heard of Subgrid, but the support for it isn't across the board from what I understand?
OK, looks like it's just Samsung Internet now that doesn't support it. Who uses that <:mace_laughing:1176448783480012840> ?
Anyone that chooses Samsung internet is used to shitty sites. Subgrid is good to go!!
you could also do it with grid if you do decide to support Samsung Internet (which I'd only bother with in this case if it breaks to a state of unusability). You'd just have to make the cards part of the same grid and have the gaps be columns in the grid
Something like
grid-template-columns: 1fr 2rem 1fr 2rem 1fr;
but yeah, subgrid probably easier and better, this looks like a perfect example for what it can be used forI'm reading up on it now
Kevin's got some videos on it too (and several more):
https://www.youtube.com/watch?v=Zddz_R1RnfM
https://www.youtube.com/watch?v=IIQa9f0REtM
Kevin Powell
YouTube
Subgrid & Container Queries change how we can create layouts
https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=containersubgrid 👈 Looking to get better at CSS? I’ve got a range of courses, including several free ones!
Container queries and subgrid are now both supported in all evergreen browsers, which is super exciting, and as a bonus, they can work really well together! ...
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...
Already picked up using
@container from his videos 🙂
Love that oneit's mindboggling it took this long to get container queries, honestly. So useful
https://codepen.io/Maynards/pen/RwdMjoV
Job done I think 🙂
very nice!