How to Keep Subgrid Row Sizes When Gap Differs from Parent?
I'm experimenting with CSS subgrid and ran into a problem with mismatched
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
In his demo, the
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
Is there a way to keep the row sizing consistent from the parent grid even when using a different
Tested with Google Chrome Version 138.0.7204.157 on Ubuntu
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 Ubuntu
YouTubeKevin Powell
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...
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...
