2

I am working on a Webshop. We do have some sample Products: Add to cart Button different heights

The problem is that the "add to cart" button is always on a different height. The button should always be 30px above the bottom - no matter how much content.

If you want to check it online: Link to Page under Construction

I've tried to use Flex-box with different Values, but I'm stuck now.

AleksandrH
  • 1,042
  • 10
  • 30
Tom tom
  • 322
  • 2
  • 16
  • https://stackoverflow.com/questions/56711501/align-child-elements-of-different-blocks – Paulie_D Oct 26 '19 at 20:23
  • @Paulie_D Now I'm curious. Why do we need subgrid support if nesting grids within grids already works? – AleksandrH Oct 27 '19 at 12:04
  • @AleksandrH Because the nested grid items only align to their own grid..not the parent grid and not to items in another card. – Paulie_D Oct 27 '19 at 13:11
  • @Paulie_D Unless we're talking about different things, I suspect that's wrong. I've tested my example in Edge/Chrome/Firefox and it works as I would expect (if you increase the amount of content in one card, the others will align). – AleksandrH Oct 27 '19 at 13:14
  • If you change the height of an item in your cards the other cards won't adjust to align to that....because the cards grid is only related to *that* card. Certainly you can always push the *last* item to the bottom but that's not the same thing as actually aligning them to one another. – Paulie_D Oct 27 '19 at 13:20
  • @Paulie_D Hmm, it seems you're actually right. If I change the title of one of my cards, it'll push the rest down so they're not aligned. Interesting. I guess we do need subgrids, then! – AleksandrH Oct 27 '19 at 13:28

1 Answers1

2

Padding (or margin) and CSS grid is what you're after.

I have a similar design on my website for material cards I created:

enter image description here

Take a look at row #2, for example. I added more content to the left card, but everything remained aligned with the content of the right card.

This entire layout consists of grids within grids. You have an outer grid in your example; all you need to do is make the cards themselves grids as well.

Here's what it looks like when you inspect it:

enter image description here

And here's what you want on your site for the cards:

display: grid;
grid-template-rows: 1fr max-content;

Before:

enter image description here

After:

enter image description here

Adding a margin to the bottom of the buttons is trivial from here:

margin-bottom: 30px;
justify-self: center;

enter image description here

You can use a similar strategy to align the prices by separating them out of their container so they're on yet another row (currently, your cards only have two "rows"):

enter image description here

Ignore the third and fourth cards and look just at two left ones; both of them have three rows. The first row is the content, the second row is the price, and the third row is the button. Change your cards to:

display: grid;
grid-template-columns: 1fr max-content max-content;

And of course, you'll have to move the price span so it's positioned directly above the button in the document:

enter image description here

AleksandrH
  • 1,042
  • 10
  • 30
  • Thank you so much - worked like magcig! But you made me curious. How should i do that with the price? – Tom tom Oct 26 '19 at 16:54
  • 1
    Basically, you would move the price out of its container so it's directly above the button in the element tree. Editing my answer. – AleksandrH Oct 26 '19 at 17:07
  • 1
    Yes thank you, I've wrapped every attribute in a div so I can set a min height. Cause sometimes I've got 2 lines.. Is not the best solution but with your help it looks awesome – Tom tom Oct 26 '19 at 17:48
  • Glad it helped! – AleksandrH Oct 26 '19 at 17:52