2

I'm trying to make these divs wrap under each-other and take up the white space. At the moment it's like they're in another row and want site under the above div.

Is this sort of thing possible with flexbox or do I need to use another method? Any help is appreciated.

Maybe I need to use floats instead? or CSS grid?

Codepen for reference

enter image description here

* {
  margin: 0;
  box-sizing: border-box;
}
.container {
  max-width: 1000px;
  background-color: grey;
  
}

.row {
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  
}

.content-wrapper {
  width: 50%;
}
<div class="container">
  <div class="row">
    <div class="content-wrapper">
      <h3>content 1</h3>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </div>
    <div class="content-wrapper">
      <h3>content 2</h3>
       <ul>
        <li>1</li>
        <li>2</li>
      </ul>
    </div>
    <div class="content-wrapper">
      <h3>content 3</h3>
        <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
    <div class="content-wrapper">
      <h3>content 4 (remove whitespace above me)</h3>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
      </ul>
    </div>
    <div class="content-wrapper">
      <h3>content 5 (remove whitespace above me)</h3>
        <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
    <div class="content-wrapper">
      <h3>content 6</h3>
      <ul>
        <li>1</li>
        <li>2</li>
      </ul>
    </div>
  </div>
</div>
monsaic123
  • 241
  • 2
  • 11

3 Answers3

0

This is not possible with display: flex. Default flex-direction will be row. This will stack things one after another from left to right. So once the second item its stacked just right to first item, the second item consumes the maximum height of from first and second div. This makes second item to leave some white space below that. If you are good to change the template, you can prefer the below one.

* {
  margin: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1000px;
  background-color: grey;

}

.row {
  margin: auto;
  display: flex;
  flex-wrap: wrap;

}

.right,
.left {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.content-wrapper {
  width: 50%;
}
<div class="container">
  <div class="row">
    <div class="left">
      <div class="content-wrapper">
        <h3>content 1</h3>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
        </ul>
      </div>

      <div class="content-wrapper">
        <h3>content 3</h3>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
        </ul>
      </div>
      <div class="content-wrapper">
        <h3>content 5 (remove whitespace above me)</h3>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
        </ul>
      </div>
    </div>
    <div class="right">
      <div class="content-wrapper">
        <h3>content 2</h3>
        <ul>
          <li>1</li>
          <li>2</li>
        </ul>
      </div>

      <div class="content-wrapper">
        <h3>content 4 (remove whitespace above me)</h3>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
          <li>10</li>
        </ul>
      </div>
      <div class="content-wrapper">
        <h3>content 6</h3>
        <ul>
          <li>1</li>
          <li>2</li>
        </ul>
      </div>
    </div>
  </div>
</div>
Nitheesh
  • 19,238
  • 3
  • 22
  • 49
0

I recommend you using Bootstrap (if not using it already). With Bootstrap, you can get what you want quite easily. You can just make 2 columns and add your content inside them. No changes in CSS will be required.

Code:

 <div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="content-wrapper">
                <h3>content 1</h3>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                </ul>
            </div>

            <div class="content-wrapper">
                <h3>content 3</h3>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
            </div>
            <div class="content-wrapper">
                <h3>content 5 (remove whitespace above me)</h3>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
            </div>
        </div>
        <div class="col-md-6">
            <div class="content-wrapper">
                <div class="content-wrapper">
                    <h3>content 2</h3>
                    <ul>
                        <li>1</li>
                        <li>2</li>
                    </ul>
                </div>
                <h3>content 4 (remove whitespace above me)</h3>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                    <li>10</li>
                </ul>
            </div>

            <div class="content-wrapper">
                <h3>content 6</h3>
                <ul>
                    <li>1</li>
                    <li>2</li>
                </ul>
            </div>
        </div>
    </div>
</div>

Output:

Output

This should solve your problem.

Note: To be able to use bootstrap, just link Bootstrap CDN in your head section:

 <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
Arrow
  • 532
  • 5
  • 18
0

Flexbox can't do that. The answers posted here so far - with simply using two columns - can work, but will pretty much break once you need responsive behaviour. Because once those two columns collapse into a single column, your list will read: 1 3 5 2 4 6.

If you need responsiveness, you can only achieve that with some JavaScript. If you do not need it to be responsive, the other suggested solutions will work out just fine.

Sidenote: The Layout you're looking for is called "masonry layout". You can probably find a nice framework/library on github.

Sebastian Börgers
  • 21
  • 4