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
gapKevin 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: subgridIn his demo, the
gapgapCode pen link: https://codepen.io/kevinpowell/pen/RwvWoLg?editors=1100
For example, changing this:
causes the first row height (with the image) to become
112px120pxIs there a way to keep the row sizing consistent from the parent grid even when using a different
gapTested 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...
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
