The best way to align grid items

Hi! I have a grid with three rows. Everything looks fine, but items aren't aligned properly, one of them is a little bit lower then the other two. What would be the best way to do that? Here's my codepen: https://codepen.io/dunder__alexander/pen/oNdEeym
14 Replies
argbet
argbet3y ago
Hi @MrAlexMad
argbet
argbet3y ago
Removing this line should fix your problem
argbet
argbet3y ago
justify-content: center;
justify-content: center;
Aleksandr M.
Aleksandr M.3y ago
Hello! Unfortunately, everything is exactly the same
Aleksandr M.
Aleksandr M.3y ago
The Jennie part moved a bit higher
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
argbet
argbet3y ago
No, it's correctly aligned, the reason why "Thomas" is lower than the others is due to the next above it being longer
argbet
argbet3y ago
Aleksandr M.
Aleksandr M.3y ago
Ohhh I see, and how can I fix it?
argbet
argbet3y ago
Not sure you can with Flexbox unless you use some weird hack around it That's how Flexbox is; it's flexible It increases and decreases in size (not so consistent) but in the name of responsiveness (which is good)
Aleksandr M.
Aleksandr M.3y ago
It kinda worked, but now the middle one is sticking out I guess I have to do something with height of each element Yeah, I love it because of that! But sometimes it's hard to get exactly what you want
argbet
argbet3y ago
If you want something more exact, probably try grid But it's recommended to use grid if you have a 2-dimensional layout In your case, that layout is 1-dimensional which flex is good at
MarkBoots
MarkBoots3y ago
its' not perfect. but if you put flex: 1 on .carsousel-item p {} it will line up the top a bit better the flex 1 allows the p to fill up all remaining space
Aleksandr M.
Aleksandr M.3y ago
In my case it was ideal! Everything works just fine, thank you very much!
Want results from more Discord servers?
Add your server