Need advice on making CSS Grid containers equal in height/width with responsive design - any tips?

I'm facing a challenge with CSS Grid Layout in creating a responsive design where grid containers need to have equal height and width. These containers hold varying amounts of content. While I've tried using min-height, it compromises the fluid responsiveness of the layout. I'm looking for a solution that maintains equal dimensions across these containers without losing the responsiveness. Has anyone tackled a similar issue or have suggestions on how to achieve this effectively? Any insights or alternative approaches would be greatly appreciated! Please go easy on me. I'm only doing this to learn about Grid and am overwhelmed by Clamp, Minmax, etc. 🙂
No description
1 Reply
clevermissfox
clevermissfox•7mo ago
Can you please post a codepen with your code? What do you have your grid-template-columns set to?