How to Keep Subgrid Row Sizes When Gap Differs from Parent?
I'm experimenting with CSS subgrid and ran into a problem with mismatched
gap values.
Kevin has this wonderful video on subgrid (https://www.youtube.com/watch?v=Zddz_R1RnfM&t=832s&ab_channel=KevinPowell), where he shows product cards using grid-template-rows: subgrid.
In his demo, the gap on the subgrid matches the gap of the parent grid, and everything lines up nicely. But when I change the subgrid's gap, or the parent gap, the row sizing no longer behaves as expected.
Code pen link: https://codepen.io/kevinpowell/pen/RwvWoLg?editors=1100
For example, changing this:
causes the first row height (with the image) to become 112px instead of the expected 120px, which is set in the parent with:
Is there a way to keep the row sizing consistent from the parent grid even when using a different gap value in the subgrid?
Tested with Google Chrome Version 138.0.7204.157 on UbuntuKevin 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 toget...
8 Replies
No, it's not possible. From the technical perspective of Grid, I don't think this could be possible... if the gap is larger or smaller, it's always going to throw things off.
If the parent's gap is bigger, I guess you could fill it in with padding on the child to simulate it... I guess?
I'd have to know more of the use case you're after to see if I could think of anything.
My use case is very similar to your demo, but with product description always visible.
If I change gap, the text might not align under the image anymore asn the image cell grows or shrinks depending on the gap.
Do you need the spacing in the cards to be bigger, or smaller than the gap?
I want the spacing between the cards to be bigger then the spacing in the cards.
hmm, I can't think of anything that can be done now that I play with it, but I also can't make things un-aligned, do you have an example you could share to show the problem?
have you tried setting
row-gap: 0; on the subgrid items?
It doesn't complete reduce the gap but does bring it down less than the parent gap.In this video I have increased the parent gap to 3rem and am toggling a row-gap:0 on the subgrid elements.
So strange, I tried setting up a CodePen to demo the alignment issue, but now it works perfectly.:raisedbrow:
The cells can still have different heights, but the text stays aligned, which wasn't the case before. Not sure if it's related, but I did update Chrome to version 139.0.7258.66 earlier today.
The cells can still have different heights, but the text stays aligned, which wasn't the case before. Not sure if it's related, but I did update Chrome to version 139.0.7258.66 earlier today.