search

picocss / pico

Minimal CSS Framework for semantic HTML
https://picocss.com
MIT License
13.71k stars 399 forks source link

v2: Card footers are not aligned in grid #442

Open nigtrifork opened 8 months ago

nigtrifork commented 8 months ago

Please search for duplicate or closed issues first.

Describe the issue

When having multiple cards in a grid, the footer is not aligned at the bottom, but at the end of the card content.

Current Behavior

see description

Expected Behavior

The footers should be at the bottom of the cards.

Reproduction URL

Code Pen: pico-issue-442

Environment

Example: Windows 10, picocss 2.0.0-rc4, chrome 121

sawcrz commented 7 months ago

The problem (i see) its because the margin top has a fixed value in the footer as follows: image

In the other hand, the article is displaying as block wich means its container size (itself) is adjusted to fit with his siblings, but the content keeps their heights: image Middle card has the major height (the red block), meanwhile the other two (green blocks) has less but display grid adjust them to fit with one height

Additionally the article needs to be displayed as flex to take the "margin-top: auto" property correctly: image

hope this will be useful to fix the problem