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.

The reason the items get an increased height is that `align-items` is set to `stretch` by default. You can easily change that: `align-items: flex-start;` — Artur Noetzel, Nov 25 '19 at 14:24
You current *#main* width is 450px. If your dynamic content for your *section* is, eg; 350px, wouldn't they all be forming a new row? Is that what you want? — Gosi, Nov 30 '19 at 08:07
If the issue is for the text you can consider add an ellipsis to avoid to have multiple lines — Yasiel Cabrera, Dec 07 '19 at 04:50

score 6 · Answer 1 · answered Nov 21 '19 at 17:10

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>

This will not work because elements are fixed in size. Example, if I put Label 1AAAAAAAAAAAAAAAAAAAAAAAAA then the element is not resizing to fit the text. — kojow7, Nov 21 '19 at 17:29
hey it will work. I will update in his code. Please check it. — Revti Shah, Dec 06 '19 at 10:53
@kojow7 you can put long name in label. Hope we fulfill your anwser. — Revti Shah, Dec 06 '19 at 10:56

score 3 · Answer 2 · edited Nov 26 '19 at 17:03

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;

}

I guess I would like this to fit as many elements in a row as possible. This might not be easy to do with media queries as you would need to do it for every possible size of screen with every possible size of div. — kojow7, Nov 28 '19 at 02:41

score 3 · Answer 3 · answered Nov 28 '19 at 06:53

I hope this will help.

CSS

#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: 10px;
 flex-grow: 1;
  box-sizing: border-box;
  min-width: 50%;
}
.innerSection{
 background-color: #ddd;
 padding: 15px;
}

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

<div id="outer">
        <div id="main">
          <div class="section">
            <div class="innerSection">
              <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>
          <div class="section">
            <div class="innerSection">
              <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>
          <div class="section">
            <div class="innerSection">
              <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>
          <div class="section">
            <div class="innerSection">
              <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>
          <div class="section">
            <div class="innerSection">
              <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> 
      </div>

#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: 10px;
min-width:50%;
box-sizing: border-box;
}
.innerSection{
background-color: #ddd;
padding: 15px;
}

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

HTML

<div id="outer">
    <div id="main">
      <div class="section">
        <div class="innerSection">
          <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>
      <div class="section">
        <div class="innerSection">
          <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>
      <div class="section">
        <div class="innerSection">
          <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>
      <div class="section">
        <div class="innerSection">
          <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>
      <div class="section">
        <div class="innerSection">
          <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> 
  </div>

see only the snippet code, the snippet below code is not updated — Fahim Khan, Nov 28 '19 at 06:59
@Revti Shah If the second box label has a long name then it will look like the first box — Fahim Khan, Dec 06 '19 at 11:30
let ask him/her about clear picture what she want. Because she/he doesn't want 100% width of boxes. — Revti Shah, Dec 06 '19 at 11:32

lost_in_magento · Answer 4 · 2019-11-18T05:26:49.210

You can try adding width and word-break to the label container and adjust the width accordingly

#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 {
    width: 100px;
    height: 100px;
    overflow-y: auto;
    word-break: break-all;
    margin-bottom: 10px;
}

.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>

Breaking the word in half is not acceptable. Instead I am wanting the other divs to gain an equal size to the larger div. — kojow7, Nov 18 '19 at 05:26
I would prefer pure CSS, but if not possible, JavaScript (not jQuery) would be acceptable. — kojow7, Nov 18 '19 at 05:31

David Machado · Answer 5 · 2019-11-28T19:46:52.740

A pure CSS solution with all of those criteria is, I think, impossible but a JS solution combined with CSS Grid is possible.

A pure CSS solution where the element dynamically adapts to the text and sets that change to all other elements is not possible. We can dynamically set the width of element to adapt to text but we can't make that width the minimum to all other elements that have the same class.

let textClass = document.getElementsByClassName("text");
let texts = Array.from(textClass);

var widths = [];

texts.forEach(function(item){
  widths.push(item.offsetWidth)
});

let maxWidth = Math.max.apply(Math, widths) + 20; // change the 20 to adjust padding

let root = document.documentElement;
root.style.setProperty('--card-min-width', maxWidth + "px");

:root {
  --card-min-width: 0px;
}

#outer {
 min-width: 350px; /*this just needs a minimal value*/
 min-height: 200px; /*this just needs a minimal value*/
}

#main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width), 1fr));
  grid-template-rows: auto;
  grid-gap: 0.5rem; /*padding between elements*/
 padding: 0.5rem; /*outer padding*/
  /*
  border: solid black 25px;
 border-radius: 25px;        <--- black border
  */
}

.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">
        <p class="text">
          Label 1AAAAAAAAAAAdsadasdasd
        </p>
      </div>
   <div class="icon"><img src="https://via.placeholder.com/75"></div>
   <div class="label">
        <p class="text">
          Label 1B
        </p>
      </div>
  </div>
  <div class="section">
   <div id="x" class="label">
        <p class="text">
          Label 2A
        </p>
      </div>
   <div class="icon"><img src="https://via.placeholder.com/75"></div>
   <div class="label">
        <p class="text">
          Label 2B
        </p>
      </div>
  </div>
  <div class="section">
   <div class="label">
        <p class="text">
          Label 3A
        </p>
      </div>
   <div class="icon"><img src="https://via.placeholder.com/75"></div>
   <div class="label">
        <p class="text">
          Label 3B
        </p>
      </div>
  </div>
  <div class="section">
   <div class="label">
        <p class="text">
          Label 4A
        </p>
      </div>
   <div class="icon"><img src="https://via.placeholder.com/75"></div>
   <div class="label">
        <p class="text">
          Label 4B
        </p>
      </div>
  </div>
  <div class="section">
   <div class="label">
        <p class="text">
          Label 5A
        </p>
      </div>
   <div class="icon"><img src="https://via.placeholder.com/75"></div>
   <div class="label">
        <p class="text">
          Label 5B
        </p>
      </div>
  </div>
 </div> 
</div>

Thanks for this answer. It seems to be closest so far to what I need (assuming there is no pure CSS solution). Also, I did not realize that Custom Properties / CSS variables actually existed. Are they necessary for this to work properly, or did you just use them for convenience? — kojow7, Nov 23 '19 at 20:58
@kojow7 I like to use them because they make the code more meaningfull and they fit this particular case like a glove — David Machado, Nov 24 '19 at 16:53
Hey, trying to get this working without having the divs stretch in height to fill the parent. Any suggestions? Each image should still be aligned with each other image both horizontally and vertically. Horizontal spacing may change between rows, but spacing between columns should be the same across every row. — kojow7, Nov 28 '19 at 02:50
@kojow7, just create the grid in an inner `div` and let the paddings, the borders. and the `min-width` and `min-height` in the main `div`. — ElChiniNet, Nov 28 '19 at 09:56
@kojow7 exactly what ElChiniNet said just updated the css and js to have the desired output. — David Machado, Nov 28 '19 at 19:47

score 0 · Answer 6 · answered Nov 22 '19 at 01:57

If I'm understanding your problem correctly, the weird gap you want to get rid of is the one on the second row once your first row wraps. If that's all you're trying to solve, then perhaps all you need to do is change justify-content from space-between to flex-start with a margin added to your .section elements and the padding in your #main adjusted to match. The spacing will now be 20px between all of the images.

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

.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>

If you don't like how that looks, you can try other justify-content values like flex-start, flex-end, space-around, space-evenly.

Alternatively, you can get rid of `justify-content` and use `flex-grow` to expand each `.section` to fit its surroundings.

#outer {
  display: flex;
}
#main {
  display: flex;
  flex-wrap: wrap;
  border: solid black 25px;
  border-radius: 25px;
  width: 450px;
  height: 500px;
  padding: 10px;
}
.section {
  background-color: #ddd;
  padding: 15px;
  margin: 10px;
  flex-grow: 1;
}

.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>

Alternatively, if you want their gutters to line up while still expanding to fit each `.section` elements' contents, you can try using `display: table` instead.

The disadvantage here is you need to split up the HTML into rows.

#outer {
  display: flex;
}
#main {
  display: table;
  flex-wrap: wrap;
  border: solid black 25px;
  border-radius: 25px;
  width: 450px;
  height: 500px;
  border-collapse: separate;
  border-spacing: 20px;
}
.row {
  display: table-row;
}
.section {
  display: table-cell;
  background-color: #ddd;
  padding: 15px;
}

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

<div id="outer">
  <div id="main">
    <div class="row">
      <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>
    <div class="row">
      <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> 
</div>

If you instead really do want all of the `.section` elements to expand to be equal with the largest `.section` element,

you will most likely need to use JavaScript since sibling elements in CSS don't know much about each other.

You could add the following JavaScript to your page and adjust the CSS as such:

function expandSectionsToLargest() {
  // Grab all of the elements with "section" class names
  var sectionElements = document.getElementsByClassName('section');

  // Find the largest width among our section elements
  var largestWidth = -Infinity;
  Array.prototype.forEach.call(sectionElements, section => {
    if (section.offsetWidth > largestWidth) {
      largestWidth = section.offsetWidth;
    }
  });

  // Set all of the sections to at least equal the largest width
  Array.prototype.forEach.call(sectionElements, section => {
    section.style.minWidth = largestWidth + 'px';
  });
}

// Expand the section widths now (must be called after the section elements are loaded)
expandSectionsToLargest();

#outer {
 display: block;
}
#main {
 display: block;
 border: solid black 25px;
 border-radius: 25px;
 width: 450px;
 height: 500px;
 padding: 10px;
}
.section {
 background-color: #ddd;
 box-sizing: border-box; /* Important to make the element's CSS width coincide with JavaScript's offsetWidth value */
 padding: 15px;
 margin: 10px;
 float: left;
}

.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>

Yes, the very last one is what I am looking for. The only problem with it is that the right-side margin is too large. It would be nice if there was equal-distance spacing between all objects and the left/right margins. — kojow7, Nov 22 '19 at 02:25

Kai Hartmann · Answer 7 · 2019-11-28T13:47:18.297

I would suggest CSS Grid also.

You specify 3 columns and 2 rows which share the width equally amongst each other, and tell the sections to have a small margin to show gaps inbetween:

.section {
      background-color: #ddd;
      padding: 15px;
      margin: 10px;
  }

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

  #main {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 1fr);
  }

<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>

The issue though is that the sections are dynamic, you may be able to fit less or more on a row so setting it to 3 columns and 2 rows would not work. — kojow7, Nov 28 '19 at 14:57

score 0 · Answer 8 · answered Dec 04 '19 at 09:08

This is it:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Title</title>
    <style>
        .firstone {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            word-wrap: break-word;
            justify-content: space-evenly;
        }

        .secondone {
            word-wrap: break-word;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-evenly;
        }
    </style>
</head>

<body>

    <div class="firstone">
        <div>
            <div>Label 1AAAAAAAAAAA</div>
            <div><img src="https://via.placeholder.com/75"></div>
            <div>Label 1B</div>
        </div>
        <div>
            <div>Label 2A</div>
            <div><img src="https://via.placeholder.com/75"></div>
            <div>Label 2B</div>
        </div>
    </div>
    <div class="secondone">
        <div>
            <div>Label 3A</div>
            <div><img src="https://via.placeholder.com/75"></div>
            <div>Label 3B</div>
        </div>
        <div>
            <div>Label 4A</div>
            <div><img src="https://via.placeholder.com/75"></div>
            <div>Label 4B</div>
        </div>
        <div>
            <div>Label 5A</div>
            <div><img src=" https://via.placeholder.com/75"> </div>
            <div>Label 5B</div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>

</html>

check https://jsfiddle.net/sugandhnikhil/b216mx5d/

resize the window to see eqqual sapcing between the image!!!!

Thanks a ton!!!!!!!

:-)

tomjosef · Answer 9 · 2019-12-05T05:23:19.977

Just wondering why let the length of the text define the size of the div? Wouldn't that make the UI weird? I'd suggest setting the width for the label and all text overflow to become ellipsis (...). With this, there's no need for JavaScript codes, just some additional css for your .label. Here's a snippet. This would look so much better than having your div sizes change whenever there will be a long text.

#outer {
 display: block;
}
#main {
 display: block;
 border: solid black 25px;
 border-radius: 25px;
 width: 450px;
 height: 500px;
 padding: 10px;
}
.section {
 background-color: #ddd;
 box-sizing: border-box; /* Important to make the element's CSS width coincide with JavaScript's offsetWidth value */
 padding: 15px;
 margin: 10px;
 float: left;
}

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

.label{
  width: 100px;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<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 2ASDEASD</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 3AGDSADASD</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 5ASDSAD</div>
   <div class="icon"><img src="https://via.placeholder.com/75"></div>
   <div class="label">Label 5B</div>
  </div>
    <div class="section">
   <div class="label">Label 6BABAF</div>
   <div class="icon"><img src="https://via.placeholder.com/75"></div>
   <div class="label">Label 5B</div>
  </div>
    <div class="section">
   <div class="label">Label 5XAEAFSASFD</div>
   <div class="icon"><img src="https://via.placeholder.com/75"></div>
   <div class="label">Label 5B</div>
  </div>
    <div class="section">
   <div class="label">Label 5AASDASEFSAFGG</div>
   <div class="icon"><img src="https://via.placeholder.com/75"></div>
   <div class="label">Label 5B</div>
  </div>
    <div class="section">
   <div class="label">Label 5ASDASEEGEDSDSD</div>
   <div class="icon"><img src="https://via.placeholder.com/75"></div>
   <div class="label">Label 5B</div>
  </div>
 </div> 
</div>
</body>
</html>

If you are worried about "how can my viewers read the rest of the text?" then you can simply apply some effects on hover to your ellipsis like this codepen sample (sample not mine) or maybe try something like this SO solution.

Hope this helps!

score 0 · Answer 10 · answered Dec 07 '19 at 04:45

This is slightly different angle to what other answers suggest. You might potentially consider truncating text istead.

#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;
    width: 100px; // I had to come up with a number here
    min-width: 0; 
}

.label, .icon {
 text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; // truncate the excess string here
}

<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>

Creating divs of equal sizes with wrap-around

10 Answers10

Alternatively, you can get rid of justify-content and use flex-grow to expand each .section to fit its surroundings.

Alternatively, if you want their gutters to line up while still expanding to fit each .section elements' contents, you can try using display: table instead.

If you instead really do want all of the .section elements to expand to be equal with the largest .section element,

Alternatively, you can get rid of `justify-content` and use `flex-grow` to expand each `.section` to fit its surroundings.

Alternatively, if you want their gutters to line up while still expanding to fit each `.section` elements' contents, you can try using `display: table` instead.

If you instead really do want all of the `.section` elements to expand to be equal with the largest `.section` element,