Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v2: Card footers are not aligned in grid #442

Open
nigtrifork opened this issue Feb 10, 2024 · 1 comment
Open

v2: Card footers are not aligned in grid #442

nigtrifork opened this issue Feb 10, 2024 · 1 comment

Comments

@nigtrifork
Copy link

nigtrifork commented Feb 10, 2024

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

@nigtrifork nigtrifork changed the title Card footers are note aligned in grid v2: Card footers are note aligned in grid Feb 10, 2024
@nigtrifork nigtrifork changed the title v2: Card footers are note aligned in grid v2: Card footers are not aligned in grid Feb 10, 2024
@sawcrz
Copy link

sawcrz commented Mar 8, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants