Card positioning inside a grid container, we want the price and buttons to be the same for each card
https://github.com/callum-laing/shopping-site/tree/main/app
As you can see in the image, the button kinda floats around in each card, I want it at the very bottom of each card so it looks aligned as you scan across, instead of how it is now where it looks wavey and clunky..
I'm fine with the item description sitting below the image, and I'm fine with the price going wherever, as long as it's like the button, where it's aligned across the cards.
GitHub
shopping-site/app at main · callum-laing/shopping-site
Created in NextJS/React. Contribute to callum-laing/shopping-site development by creating an account on GitHub.
37 Replies
can you show what you intend to have, with either paint or excalidraw?
https://codepen.io/chooking/pen/dyLJXJB
Making the card flex boxes solves both this and your previous question. You can use margin-top for the spacing if the container is flex.
no no, i want the final look
what you have there has a flaw:
padding breaks it slightly
that's why i want a sketch of the final intention
the final intention may be to have the padding take absolutely no influence on the button
but, it may be what you have too
both are a button at full width
I'm not the OP. I was offering a solution.
How did you add padding that broke it? I added padding after seeing your comment and it did not break. Did you add padding only to the button?
no, i added to the parent
it's possible to "fake" it with margin on the image, but it will cause weird issues (specifically with backgrounds)
I see. You added padding only to the last card. While there are some use cases for that, I was expecting all cards to get equal treatment.
i only added to the last card to show what's happening
the button is no longer taking the entire width
OK. I did not realize that was what you wanted to demonstrate.
it's fine
which one is the intended version?
the html on v1 and v2 can be exactly the same, but the html on v3 would ideally be changed
someone elses example but this is basically what im after, alignment wise, i mean
though the text like I said can sit below the image, i just want teh buttons to stick to the bottom
so, v1 then?
for the
+ and - thingy, you can use an inline gridnot bothered about the + - i have that on the cart page
sorry let me read the convo here haha 😄
so, what's bothering you?
currently, what you have is v2
well... kinda.. the buttons position seems to vary per card atm
im more worried about the position of the button
and how you want it to react to padding
again, this is someone else's design, but this is what I'm going for here . I'd look at their code but it's some wierd combination of css in html.
then what he sent it perfectly fine
the margin-top: auto didnt seem to do anything for mine
It only works if the card is flex.
the whole solution, not just bits
It doesn't show you using margin-top on the button. Also, I haven't seen the HTML. If there is a wrapper around the button, the margin has to go on the wrapper instead of the button and/or a different solution might be needed.
https://github.com/callum-laing/shopping-site/blob/main/app/shop/page.jsx <-- the html is here
oh right sorry, the HTML is
so yeah ,there's a few wrappers in general there
The problem is that the button is inside of another container.
ohhh hold on
adding it here seems to have worked
nice
If you don't mid me asking, how has margin-top: auto; fixed that lol
(huge thanks, btw)
Automatic margin takes the full available space. It's more commonly used for centering. The way centering happens is both sides get the maximum available space.
Gotcha. Well that's awesome, thanks a bunch 🙂