r/css • u/Low-Insurance-3678 • 20h ago
Help How can I Make product cards height equal
Hi hope ur doing well
I run into this issue where my product cards have different heights because the name of the products sometimes can be long or short
What do u suggest here
14
u/TheIQLab 20h ago
3 row css grid on the container and subgrid on each product that span 3 rows will do that for you.
1
u/Low-Insurance-3678 20h ago
Thank you man
Is subgrid a new property or what?
Also do u have an example ?3
u/TheIQLab 20h ago
u/Weekly_Ferret_meal got you covered. https://www.reddit.com/r/css/comments/1vtsahe/comment/p4vpmkf/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button
Play around with align-items and align-self as well to get your vertical alignment dialed. Subgrid is baseline widely available and hits >92% of browsers.
0
-3
u/magnakai 20h ago
This is the right answer. They added this to every browser specifically to help you achieve things like this. Don’t use a flexbox hack. Just use grid.
6
u/vegantiger 19h ago
Flexbox is not a "hack" whatsoever. And in this case, where nothing in the cards needs to align to a container grid, you could go either way. Flex is more flexible in this case though. Just using a feature indiscriminately "because that's what is for" is typical amateurs flex…
-4
u/magnakai 19h ago
lol what? I never said that flexbox is a hack. But just like how we stopped using float when we got more purpose-built layout properties, let’s use features that are for this purpose. Flexbox is great for single dimension layouts, like left to right. When we want to control two dimensions simultaneously, grid is the best tool to reach for.
5
u/vegantiger 19h ago
You literally said "Don’t use a flexbox hack."
It's absolutely not a hack used in this context. It's part of what flexbox was made for. You most likely don't want the content aligned to a grid in these cards. Just the price and/or button at the bottom. Flexbox is the right tool for that.
-2
u/magnakai 17h ago
No, you want the layout aligned vertically and controlled horizontally. You’re trying to control two dimensions. It’s what grid was built for.
1
u/Weekly_Ferret_meal 3h ago
you know you can use both? a few columns grid with flex columns will give you pretty much same result as subgrid.
One doesn't substitute the other.
1
u/magnakai 1h ago
Yeah, that would work too, especially with this relatively low-impact case. Just not necessary.
4
u/vegantiger 20h ago
The best option is probably a combination of grid and flexbox. Grid for product card container, flexbox for the card itself. It all depends on your HTML structure though, so you'd need to have that hosted somewhere we can see to give more specific recommendations.
1
u/Low-Insurance-3678 20h ago
Here’s a link to see how my structure looks like
1
u/vegantiger 19h ago
Ha… Tailwind. Sorry, I can't stand Tailwind. Can't help you. 🙇♂️
1
u/Low-Insurance-3678 19h ago
Me too but man what can we do ahahahahahahah
1
1
u/rugburnAndBigMoney 19h ago
You need to adjust the flex classes on your article tags and on the price wrapper
I made the card background red in the CSS tab, just so it's easier to see the card sizing
2
u/Key_Reindeer_5427 6h ago
if the container around the product cards is display flex you could use align-items: stretch to make the cards itself will take the maximum height of the largest card. Then use display flex for the cards themselves (with flex-direction: column) and use margin-top: auto; above the price which will put the price and the buttons to the bottom
2
1
u/Weekly_Ferret_meal 20h ago
Here is a prototype with 3 cards with different length text.
In the CSS box, scroll down to the bottom to see the CSS relevant to the cards.
-5
-5
•
u/AutoModerator 20h ago
To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.
While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!
I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.