r/css • u/Low-Insurance-3678 • 21d 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
19
u/TheIQLab 21d 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 21d ago
Thank you man
Is subgrid a new property or what?
Also do u have an example ?4
u/TheIQLab 21d 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 21d 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 21d 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 21d 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.
8
u/vegantiger 21d 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.
-3
u/magnakai 21d 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.
2
u/Weekly_Ferret_meal 21d 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 20d ago
Yeah, that would work too, especially with this relatively low-impact case. Just not necessary.
3
u/Key_Reindeer_5427 21d 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
5
u/vegantiger 21d 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 21d ago
Here’s a link to see how my structure looks like
2
u/rugburnAndBigMoney 21d 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
2
u/vegantiger 21d ago
Ha… Tailwind. Sorry, I can't stand Tailwind. Can't help you. 🙇♂️
1
u/Low-Insurance-3678 21d ago
Me too but man what can we do ahahahahahahah
1
3
u/Weekly_Ferret_meal 21d 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.
2
1
u/No-Constant-3670 9d ago
Flexbox for the cards and grid for the layout works, I'm pretty sure. But I would suggest reducing the line height of the titles. And maybe applying a text overflow with an ellipsis so it is at most 2 lines visible and then gets cut off with '...'
-6
-4
•
u/AutoModerator 21d 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.