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
Hi @MrAlexMad
Removing this line should fix your problem
Hello!
Unfortunately, everything is exactly the same
The Jennie part moved a bit higher
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
No, it's correctly aligned, the reason why "Thomas" is lower than the others is due to the next above it being longer
Ohhh I see, and how can I fix it?
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)
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
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
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 spaceIn my case it was ideal! Everything works just fine, thank you very much!