Wrapping different sized divs with no vertical whitespace

Question

When I resize my window, I am wanting a row of divs of different sizes to cascade, however when I try with Flexbox I am getting vertical white space due to the differing sizes of the divs.

Is there any way in which I can remove this whitespace/specify how much there is between the divs?

Here is a link to my stackblitz

.content {
    color: #fff;
    font: 100 24px/100px sans-serif;
    height: 150px;
    text-align: center;
}

.content div {
    width: 300px;
}
.red {
    background: orangered;
  height: 40px;
}
.green {
    background: yellowgreen;
  height: 150px;
}
.blue {
    background: steelblue;
  height: 150px;
}

/* Flexbox Styles */
.content {
    display: flex;
    flex-wrap: wrap;
}

<div class="content">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

You can’t (well not without changing the sizes of the boxes). Flexbox isn’t designed for 2 dimensional layouts. — evolutionxbox, Sep 09 '20 at 14:52
Is there a way in which this can be done without using flexbox? — physicsboy, Sep 09 '20 at 14:52
I don't know if it's possible in full *css*, I do it using [isotope](https://isotope.metafizzy.co/layout-modes/masonry.html). It's a jQuery plugin. — Obzi, Sep 09 '20 at 14:58
You could so this with a column-based layout rather than the standard rows, but note that the divs are ordered down, not across - i.e. 1 & 2 will appear in the first column and div 3 in the second. Is this acceptable? Also what are your other requirements, e.g. are they always going to be a fixed width? If so, what do you want to happen to the extra space when the third div doesn't fit and wraps — FluffyKitten, Sep 09 '20 at 15:05
@FluffyKitten imagine I'm displaying product information about 3 different products, reusing one generic component. They will all be the same width but can vary in height (although will generally be two or three different heights). The screen width will be limited to how small it can go, so minimum 2 boxes across. I just want the boxes to wrap and not leave the vertical whitespace. — physicsboy, Sep 09 '20 at 15:21
Do they needed to be in the order left-to-right (like your example, but without the gaps obviously) so the left column with have products 1,3,5 and the right column will have 2,4,6 - or can the be placed in columns so products 1,2,3, are in the left column and 4,5,6 are in the right column? — FluffyKitten, Sep 09 '20 at 15:25

ArnaudV · Answer 1 · 2020-09-09T15:03:34.547

0

The problem is here is that you are setting a width of 300px to the colored children of content with

.content div {
    width: 300px;
}

as the .content div has no width, it's the size of its parent, which is 100% of the screen width, . So, it will display as much divs as it can within its own width. If you resize to something between 300px and 599px, you should have all your divs aligned as you wish.

What I think you'll want to use here is a media query that will set your .content div to flex-direction: column once screen width is inferior to the size you want. Let's say 900px, so once your three colored children don't all fit on the same line, they align vertically. You will also need to remove the flex-wrap: wrap that's forcing the elements to stay on the same line.

It would look something like this:

@media screen and (max-width: 900px) {
  .content {
   flex-direction: column;
   flex-wrap: nowrap;
  }
}

edited Sep 09 '20 at 15:03

answered Sep 09 '20 at 14:59

ArnaudV

342
2
9

I couldn't fully grasp what you were trying to say, could you please provide a codepen so I can see for myself? Just to re-iterate - I am wanting no vertical whitespace between the red and blue boxes when the screen is small enough to collapse from a single row. – physicsboy Sep 09 '20 at 15:03
you can try it on your codepen like by simply adding `@media screen and (max-width: 900px) { .content { flex-direction: column; flex-wrap: nowrap; } }` to your css – ArnaudV Sep 09 '20 at 15:05
Ah yes. This doesn't do what I am after. Sorry. – physicsboy Sep 09 '20 at 15:22

Wrapping different sized divs with no vertical whitespace

1 Answers1