#CSS subgrid help?
Live test https://codepen.io/thebabydino/pen/raNedoQ?editors=0100 with problem: want the the same fixed height for description on all card rows
repeat(3, auto) 😿 different heights for cards on different lines
repeat(6, auto auto 3lh) 😿 unwanted space below cards widescreen
auto-fit instead of 6 won't work 😿
Live test https://codepen.io/thebabydino/pen/raNedoQ?editors=0100 with problem: want the the same fixed height for description on all card rows
repeat(3, auto) 😿 different heights for cards on different lines
repeat(6, auto auto 3lh) 😿 unwanted space below cards widescreen
auto-fit instead of 6 won't work 😿
1 / 2
Comments
Should make all rows the same height, if you use the repeat(3, auto) option (or maybe 3, 1fr)
grid-auto-rows: auto auto calc(3lh + .5rem);
(via Mastodon)
Does what I want https://codepen.io/thebabydino/pen/raNedoQ?editors=0100
For the most part, would like to make the .card overflow its grid area, but at least the p overflows it and it just might do....
Or is the goal to have each card the same height, based on the tallest in the grid (pretty much defined as which one has the longest content)?
Have you trided
p {
box-sizing: border-box;
min-height: 6.5rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: scroll;
padding-bottom: .5rem
}
What about: grid-template-rows: 80px 1fr 1fr;
and a fixed height for p (with overflow scroll)?
This does it:
grid-auto-rows: auto auto calc(3lh + .5rem)
(solution via Mastodon)