Align/stretch cards vertically in grid

[brgrz]

Describe the bug

Cards inside a grid don't align vertically. The sl-card element is being stretched however the contents is not.

I tried with

	sl-card::part(base) {
		align-items: stretch;
	}

but has no effect.

Also tried

	sl-card::part(base) {
		height: 100%;
	}

which makes them equal height but leaves unwanted blank space below the footer (inside the card).

[brgrz]

Right, this seems to have fixed it somewhat but the blank space is redistributed between parts

	sl-card::part(base) {
		height: 100%;
		justify-content: space-between;
	}

will leave issue open if there's another way anyone wants to add.

[claviska]

Is this what you're looking for?

https://codepen.io/claviska/pen/MWEwGXe?editors=1100

Relevant code:

sl-card {
  display: flex;
}

sl-card::part(base) {
  flex: 1 1 auto;
}

[brgrz]

No, it doesn't have the desired effect. The body part is the one that's varies in height due to content and moves the footer up/down (depends on the tallest body). The only solution I found is making body the minimum required height:

	sl-card::part(base) {
		height: 100%;
	}

	/* make body same height, temp fix for unaligned footers in height 100% */
	sl-card::part(body) {
		min-height: 200px;
	}