Container with different size from others
I want all container with the same size here. However, the last one container (with the t-shirts icon) has a different size compared to the others. I believe it's because of the word length... How can I solve it?
https://codepen.io/ssstephanyyy/pen/rNqYYqE
10 Replies
i guess explicitly write down the height and width
or maybe min-width
and min-height
Adding
flex: 1 to the cards should fix this but you have something else going on which is preventing it.
The issue may be that you appear to have extra wrappers around contents.
I have made a fork of your pen and slimmed it down a bit to remove some of the excess html and adjusted the CSS a bit. As you can see in my fork the boxes do have the same width
https://codepen.io/cbolson/pen/mdzqNpLThis is happening because of the
.category, which you have a display: flex. That makes the children shrink, so the .category-container is getting as small as it possibly can, which in turn makes .category-items-box as small as it can. It's display: flex, so the children go next to one another, but they all shrink as much as possible.
Trying to get them to grow has no effect, because they have no room to grow because the parent is being forced to be small.
As far as I can tell, using .flex on .category isn't really doing anything?
If you want to keep everything centered, it makes more sense to simply put a max-width and margin-inline: auto
You can add flex: 1 to the .category-items-box like Chris suggested, and they'll all be the same size (because they have room to grow).
Alternatively, I'd go with Grid for a layout like this, because then the children have no control over the size anyway, it's all defined by the grid itself.
use gridThanks guys for the help. However I don't know why, but flex:1 in the .category-items-box and removing the .flex on the .category is not working. Don't make the last container with the same size of others.
sorry, mixed things up. Remove
display: flex from the .category and add flex: 1 to the .category-item - you will want a max-width on the .category now too though, I'm guessingI don't know how that happened but I sent you a link to my forked version without my changes - I'll do it again....
please do it again using grid as you said above
thanks, I will try
I'll have a go at grid but for now here is what I meant to send earlier: https://codepen.io/cbolson/pen/mdzqNpL 🤞
Same with grid https://codepen.io/cbolson/pen/NWOXzmr
The advantage of using grid here is firstly that, as Kevin says, you don't need to worry about the widths as the grid takes care of that, and secondly that it works well responsively without any need for media queries (though that is possible with flexbox too as per my previous codepen).
The interesting bit here is this line:
That is telling the grid to have as many "cells" (columns) in a row as will fit, each taking up an equal width (1fr) but with a mimium width of 300px (you can change this value to suit). If there isn't room for a complete cell at the minimum defined width the code automatically moves the cells to a new row and adjusts them to have the same width.
grid-template-columns: repeat(auto-fit,minmax(300px,1fr));That is telling the grid to have as many "cells" (columns) in a row as will fit, each taking up an equal width (1fr) but with a mimium width of 300px (you can change this value to suit). If there isn't room for a complete cell at the minimum defined width the code automatically moves the cells to a new row and adjusts them to have the same width.
Thanks Chris and Kevin. Helped a lot!! 🙂