Creating divs of equal sizes with wrap-around

Question

I am trying to create a menu system with an image and text above and below. The data is dynamic. I am wanting the menu system to appear so that each image is equal distance from each other image so that they line up in a grid of images both horizontally and vertically.

The problem is the text. If the text is longer than the image, then the div gets enlarged. However, then it creates an awkward looking gap as the images are no longer equally spaced with each other.

To work around this I think the best approach would be to have each of the other divs to adopt the size of the larger div. However, I am not sure how to go about doing this.

I have tried with flexbox using the flex-wrap property. While it is wrapping nicely, I haven't been able to find a way to get each of the images to line up equal-distance from each other.

How do I go about achieving this?

My code is as follows:

#outer {
	display: flex;
}
#main {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	border: solid black 25px;
	border-radius: 25px;
	width: 450px;
	height: 500px;
	padding: 20px;
}
.section {
	background-color: #ddd;
	padding: 15px;
	
}

.label, .icon {
	text-align: center;
}

<div id="outer">
	<div id="main">
		<div class="section">
			<div class="label">Label 1AAAAAAAAAAA</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 1B</div>
		</div>
		<div class="section">
			<div class="label">Label 2A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 2B</div>
		</div>
		<div class="section">
			<div class="label">Label 3A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 3B</div>
		</div>
		<div class="section">
			<div class="label">Label 4A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 4B</div>
		</div>
		<div class="section">
			<div class="label">Label 5A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 5B</div>
		</div>
	</div> 
</div>

PS. I'm also not sure why my section divs are increasing their height. So any insight on this would also be appreciated.

Answer 1

Not sure if you can make it so that every element grows to be as big as the biggest element, but if you could assume that you want a specific number of elements in every row, then just make them equal size. I think this is much easier done with a css grid instead of flexbox. See the solution below. I use grid to position the section elements as well as to make sure that inside each section all three parts (top text, image, bottom text) take exactly 1/3 of the div each - this is to make sure all images also align vertically. In addition I use flex in labels to make sure the texts are in the middle (horizontally and vertically).

#outer {
}
#main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
	border: solid black 25px;
	border-radius: 25px;
	width: 450px;
	height: 500px;
	padding: 20px;
}
.section {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 1fr 1fr 1fr;
	background-color: #ddd;
	padding: 5px;
  margin: 5px;
  min-width: 80px;
  vertical-align: center;
}

.label, .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  text-align: center;
}

<div id="outer">
	<div id="main">
		<div class="section">
			<div class="label">Label 1AAAAAAAAAAA</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 1B</div>
		</div>
		<div class="section">
			<div class="label">Label 2A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 2B</div>
		</div>
		<div class="section">
			<div class="label">Label 3A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 3B</div>
		</div>
		<div class="section">
			<div class="label">Label 4A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 4B</div>
		</div>
		<div class="section">
			<div class="label">Label 5A</div>
			<div class="icon"><img src="https://via.placeholder.com/75"></div>
			<div class="label">Label 5B</div>
		</div>
	</div> 
</div>

Answer 2

Give this quick codepen a spin. One thing missing is media query for how to behave when it can't fit 3 columns in a row for which all I would change is the max-width property to be 50% - individual item padding left and right - how much space you want between and change flex: 1 33% to flex: 1 55%

(You can skip the padding value if you change how your box sizing works so that width includes padding in it's width with box-sizing property like this)

https://codepen.io/mihaelnikic/pen/bGGPBYG

<div class="container">
    <div class="item">
            <div class="label">Label 5A</div>
            <div class="icon"><img src="https://via.placeholder.com/75"></div>
            <div class="label">Label 5B</div>
    </div>
    <div class="item">
            <div class="label">Label 5A</div>
            <div class="icon"><img src="https://via.placeholder.com/75"></div>
            <div class="label">Label 5B</div>
    </div>
    <div class="item">
            <div class="label">Label 5A</div>
            <div class="icon"><img src="https://via.placeholder.com/75"></div>
            <div class="label">Label 5B</div>
    </div>
    <div class="item">
            <div class="label">Label 5A</div>
            <div class="icon"><img src="https://via.placeholder.com/75"></div>
            <div class="label">Label 5B</div>
    </div>
    <div class="item">
            <div class="label">Label 5A</div>
            <div class="icon"><img src="https://via.placeholder.com/75"></div>
            <div class="label">Label 5B</div>
    </div>
    <div class="item">
            <div class="label">Label 5A</div>
            <div class="icon"><img src="https://via.placeholder.com/75"></div>
            <div class="label">Label 5B</div>
    </div>
</div>

CSS:

.container {
    display: flex;
    flex-flow: row wrap;

    width: 100%;
    justify-content: space-between;
}

.item {

    min-height: 200px;
    background: coral;
    border: 1px solid black;


    flex: 1 33%;
    max-width: calc(33% - 20px - (15px * 2) / 3);
    min-width: 200px;
    margin-bottom: 15px;

    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;

    padding: 10px;

}