Grid children not stretching + centering children alignment
Hey, i have two questions regarding this issue.
1. Why do the grid items not stretch to be the same size as eachother even though that's the default behaviour? Is that something you're unable to do with an
auto-fit grid?
2. There are two different types of cards in this example, a regular one and one with a banner, what method would be best to center the icon and text to be aligned evenly across all cards? I've tried a grid approach in the example (the stretch needs to be working for this one otherwise i don't believe the ones without the banner would be perfectly centered)
https://codepen.io/deerCabin/pen/abregME
Thank you in advance.14 Replies
The grid elements are stretching to be the same height as each other.
Bear in mind that in your code the grid elements are the <li>. If you give them an outline or background color, you will see that they are the same height.
The first block content is taller as you have added a banner before the article. As the articles themselves have an aspect ratio of 1 they can't adapt to the height of their parent so the ones without the banner are shorter.
As for how to position the icons, it really depends on what you are trying to achieve
I would probably give the banner a position of absolute and place it at the top of the <li>, rather pushing the article down. But that may not be what you are trying to achieve.
https://codepen.io/cbolson/pen/MWdNNam
ohh the aspect ratio being the issue flew over my head, thank you. So i'd have to give
.card a min-height: 100%; for it to fill out the li?
and for the icons, i did think about position absolute as that is what i'm trying to achieve but the would i not have to worry about giving the card a bigger padding top so content doesn't sit behind it as the banner would then be out of the doc flow?
i'll take a look at the pen too, thanksYou could give the aspect-ratio to the <li> as they are really what needs to have the fixed aspect. Then, as you say, give the .card a height of 100% (or min-height)
and for the icons, i did think about position absolute as that is what i'm trying to achieve but the would i not have to worry about giving the card a bigger padding top so content doesn't sit behind it as the banner would then be out of the doc flow?You are right, if the cards are going to have more content it could well go behind the banner with my suggested solution. I based it on what you had in the codepen but if you have more content it could become an issue.
your solution was exactly what i wanted but since anything could happen and thinking ahead is good, what would you recommend if there ever was more content?
your suggestion of setting a min height on the articles should work as regards ensuring that the cards are the same height.
i updated the codepen (https://codepen.io/deerCabin/pen/abregME) with the changes you made and added more text to the first card so that issue occurs, since the articles have a
min-height on them and the issue is occurring would you mind explaining what you mean please? (i had to take the aspect ratio off the li for this example as it was preventing the cards from stretching)There are different issues/questions here.
One is the aspect-ratio. If you define that, the content won't force the element to get any taller/wider so may well end up overflowing.
As for the banner covering the content, as you can see, this is an issue if you have more content. One suggestion, which you mentioned earlier, is to allow for this in by adding top padding to all the cards (and possibly to the bottom to keep the contents centered)
regarding the top padding (or other methods), since the content length may change and the padding value would have to be altered as a result of that, would there be a way to make it less magic numbery?
I think that the only way to do this (without JS) would be to give the banner a set height and use that value for the extra padding. Defining this as a custom property will make it easier.
that sounds good, thank you for all your help here. And setting a fixed height on the banner would be alright and not a bad practice? just asking since setting fixed heights is sometimes not recommended
it is fine as long as you are setting it for a reason (such as this) and are aware of the possible consequences.
If you want to be able to do this sort of thing you don't have much choice. As long as you can "assume" that the banner content won't be too long and force a line break you shouldn't have any issues.
Ah okay I understand, and I wasn’t aiming for the banner content to wrap which is perfect
The alternative is to do it as you were doing it initally, ie, adding it as a block element. As long as all the cards have a min-height they should all adjust to allow for one of them having extra content.
The main (probably only) issue with your original code was the aspect-ratio which was limiting the height of the card contents making the first one appear taller.
Ah I see, thank you for all this