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.