Don't worry, this is a super common CSS Grid hurdle!
I totally get the frustration. When you're first diving into CSS Grid, it feels like magic until you add a bit too much text and suddenly everything looks wonky. The good news is that Grid is actually built to solve this exact problem; you just need to nudge it in the right direction.
The reason your row is stretching is actually Grid doing its job—it's trying to make sure every item in that row stays the same height as the tallest one. If you want it to look professional and uniform without using "hacky" fixed heights (which, as you found out, lead to ugly overflows), here is what I usually do:
1. Use grid-auto-rows: 1fr
On your parent grid container, make sure you have grid-auto-rows: 1fr; set. This tells the browser that every row created should take up an equal fraction of the available space. If one card gets taller because of extra text, the other cards in that same row will expand to match it perfectly.
2. Turn your cards into Flexboxes
This is the secret sauce for pricing cards! Even if the cards are the same height, the content inside (like the "Buy Now" button) might still sit at different levels. To fix this, apply these styles to your card class:
- display: flex;
- flex-direction: column;
- height: 100%;
Then, if you have a button at the bottom, give it margin-top: auto;. This pushes the button to the very bottom of the card regardless of how much text is above it, keeping your layout looking clean across the whole row.
3. Check your Align-Items property
Sometimes we accidentally set align-items: start; on the grid container because we're used to doing that in other layouts. If you do that, the cards will only be as tall as their own content. Make sure your container is either using the default or explicitly set to align-items: stretch;.
Give those a shot! It’s much better than using fixed pixel heights because it allows your site to stay responsive and accessible for users who might have their browser text zoomed in. Let me know if that clears it up for you!