I NEED HELP WITH CREATING CARDS WITH CSS(using flexbox or grids)
I NEED HELP WITH CREATING CARDS WITH CSS.
Everytime i create cards, i find it hard for the layout to be same for all cards.
For eg:- if the card has title, image, description, tags, button, and if the description is too long in one of the card, them all the alignment of the cards are broken.
So can someone please teach me how to properly do it, as I'm really struggling.
Here's my portfolio website I'm building. I need help with the project section cards.
PORTFOLIO WEBSITE URL : https://rohit-kf.vercel.app
IF ANYONE COULD HELP ME, I'LL GREATLY APPRECIATE IT. THANK YOU. 🥺
Rohit K F
Portfolio website generated by Rohit K F
20 Replies
It depends on what you want to achieve
I want all the inner items to be on same level.
Like all card titles, description, etc
This is how my cards look right now
One option would be to use grid on the cards and define the specific row heights to ensure that they are always the same.
So like grid-template-columns: 1fr 1fr 1fr 1fr 1fr
Kinda something like that ?
not columns, rows
Oh yes... Sorry
but they would need to be specific heights (eg pixels) as they are separate cards (sub grid would be great here).
If you want them to be all on the same level you have to set an height for each one of them, for example like this
I suck at subgrids.... Like... I have no clue bout it.
The issue you will have is if the content is too long for the assigned height. One solution would be to use line-clamp (as you are using Tailwind)
Subgrid is very recent and is supported in browser but only in recent versions
I do clip the text in my jsx file for the description.
Around 2023
I'll try out the GRID method with specific heights and get back to you guys
This video may help
https://youtu.be/Zddz_R1RnfM?si=ZsKWh9udpmbxppCs
Kevin Powell
YouTube
Subgrid & Container Queries change how we can create layouts
https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=containersubgrid 👈 Looking to get better at CSS? I’ve got a range of courses, including several free ones!
Container queries and subgrid are now both supported in all evergreen browsers, which is super exciting, and as a bonus, they can work really well together! ...
Kevin Powell
YouTube
Easy and more consistent layouts using subgrid
Grid is amazing, but it has it's limitations, many of which are solved with subgrid! Subgrid is only currently supported in Firefox, and this video is part of my Subgrid Awareness Month where I'm looking at raising the profile of subgrid and getting people excited by it!
🔗 Links
✅ New to grid? Start here: https://www.youtube.com/watch?v=v5KzBP...
here a quick example with subgrid
https://codepen.io/MarkBoots/pen/yLrPoLQ
I usually tackle this with using flex-grow. Check out this codepen I whipped up for you: https://codepen.io/MattBudz/pen/qBwVVNg
Notice the card-body has
display: flex; and then the card-description has flex-grow: 1
This ensures that the height of all your cards is even with everything above and below the card description maintaining a consistent position in all cards regardless of the height of the description.
You can apply the flex-grow to the card-title element also if you anticipate your titles will vary in height.