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
Jason
CodePen
NWJYvzq
...
No description
No description
11 Replies
Maynards
Maynards•10mo ago
Could I possibly achieve this with Grid?
clevermissfox
clevermissfox•10mo ago
Subgrid!!
Maynards
Maynards•10mo ago
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> ?
clevermissfox
clevermissfox•10mo ago
Anyone that chooses Samsung internet is used to shitty sites. Subgrid is good to go!!
Jochem
Jochem•10mo ago
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 for
Maynards
Maynards•10mo ago
I'm reading up on it now
Jochem
Jochem•10mo ago
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...
Maynards
Maynards•10mo ago
Already picked up using @container from his videos 🙂 Love that one
Jochem
Jochem•10mo ago
it's mindboggling it took this long to get container queries, honestly. So useful
Jochem
Jochem•10mo ago
very nice!
Want results from more Discord servers?
Add your server