How can I use container inline-size together w/ subgrid on the same .card El inside a grid layout?
✅solved
front-end
front-endis it even possible?!
here is my codepen:
https://codepen.io/noobcoder137/pen/QwEOxVK?editors=0100
You can comment out the container-type property on line 71 to see the difference.
I have a responsive CSS Grid layout that contains 3 .card blocks.
Mobile: cards are stacked in one column
Tablet : 2 cards per row
Desktop: 3 cards per row
Each .card consists of:
→ This works well using subgrid.
2. The font size of the heading and paragraph should scale based on the width of the .card, to avoid using too many media queries and to allow adding more cards without constantly adjusting font sizes.
→ This works using container-type: inline-size on .card and cqi units on the text.
here is my codepen:
https://codepen.io/noobcoder137/pen/QwEOxVK?editors=0100
You can comment out the container-type property on line 71 to see the difference.
Context:
I have a responsive CSS Grid layout that contains 3 .card blocks.
Layout behavior:
Mobile: cards are stacked in one column
Tablet : 2 cards per row
Desktop: 3 cards per row
Each .card consists of:
Goal:
1. No matter how long the heading or paragraph is, all cards in a row should have the same height and aligned content.→ This works well using subgrid.
2. The font size of the heading and paragraph should scale based on the width of the .card, to avoid using too many media queries and to allow adding more cards without constantly adjusting font sizes.
→ This works using container-type: inline-size on .card and cqi units on the text.
Problem:
subgrid doesn’t seem to work properly when combined withcontainer-type: inline-sizecontainer-type: inline-size
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?
