Use grid for this card component layout with tricky logo positioning
Hi there. I have been trying to convert a small component I use currently to use grid and wondered if people could help.
Basically I ahve a small card, it contains an image at the top, and some text content underneath. I also have a logo which needs to be positioned 50% on and 50% the bottom of the image vertically with spacing left and right. The middle line of the logo should always sit on the bottom of the image.
The image should be square and there should be enough space to each side of the logo. Approx 25% of the width of the component. In my demo codepen here : https://codepen.io/rctneil/pen/zxvbodx?editors=1100 - the logo should be approx 100px but it needs to all be flexible so it can flex if placed in slightly wider containers.
My version linked above sort of works but just wondering if others can do it better with grid and ensure the logo always sits correctly. I don;t think I quite have the grid-template-rows set correctly.
Thanks
2 Replies
I'd be tempted to simplify this by having a grid section just for the top bit to create the overlap.
https://codepen.io/kevinpowell/pen/XJmGYZW?editors=1100
Also, I noticed you used
display: block on a few elements. As long as an element is a grid item (or flex item), the display property for block/inline doesn't have an impact, since they're a grid item and so live by those rules.Ooooh interesting solution! Thanks. Will try to incorporate that this weekend, Ah yes, I know about block/inline inside grid or flex. I think i left some on when copying from other code. Knew they wouldn't affect stuff though.
Appreciate the reminder though! 🙂