How to position a list of divs vertically within columns?

Question

So I don't know exactly how to phrase this question, which is probably why I've been having a hard time finding search results. But I figure a picture's worth a thousand words so...

Basically I want to have multiple columns of divs with variable heights (all content is dynamically created, so no hard coding positions), where each div aligns itself vertically based on the div above it in it's column, instead of relative to the divs next to it.

Edit:

Also, I need the number of columns to adjust based on screen size. So there could be one, two, three, or four columns at any point, but the same number of total divs.

https://jsfiddle.net/r7pcouuy/ are you looking something like this ?? — Baezid Mostafa, Apr 14 '17 at 21:27
Looks like you want the **Pinterest** or **Masonry** layouts. http://stackoverflow.com/q/34480760/3597276 — Michael Benjamin, Apr 14 '17 at 21:31
Possible duplicate of [Is it possible for flex items to align tightly to the items above them?](http://stackoverflow.com/questions/34480760/is-it-possible-for-flex-items-to-align-tightly-to-the-items-above-them) — T.Chmelevskij, Apr 14 '17 at 21:43
It appears to me that the suggestions for Masonry do not apply here as the elements are grouped within columns. — Rob, Apr 14 '17 at 21:58

score 0 · Answer 1 · answered Apr 14 '17 at 21:23

0

To elaborate on Sterling Archer's comment. You should style all of them

float:left;

in order to have them split from each other evenly. I would use a percentage to set their width

width:33%;

If you need an example I'm happy to provide, but I've seen this question with several examples out there.

answered Apr 14 '17 at 21:23

Jester

141
4
15

@Josh Hadik Since I can't comment on other questions yet here is the answer to your edit. [link](http://stackoverflow.com/questions/25736084/change-number-of-columns-depending-on-screen-size) – Jester Apr 14 '17 at 21:30

Shtut · Answer 2 · 2017-04-14T21:33:39.887

0

If you're able to add an external library, you could use Bootstrap which allows you to set a grid system which is adjusted based on screen resolution. ie- in higher resolutions you can have more columns, and have less columns in lower resolutions.

edited Apr 14 '17 at 21:33

answered Apr 14 '17 at 21:27

Shtut

1,397
2
14
28

score 0 · Answer 3 · answered Apr 14 '17 at 21:31

You can use flex with width set to about 30%:

.board {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-content: space-between;
}

.col {
 width: 30%;
 margin: 0 auto;
}

.cell  {
  height: 50px;
  width: 100%;
  background-color: black;
  margin-bottom: 10px;
}

<div class="board">
  <div class="col">
    <div class="cell"></div>
    <div class="cell" style="height: 100px"></div>
    <div class="cell"></div>
  </div>
  <div class="col">
    <div class="cell" style="height: 100px"></div>
    <div class="cell"></div>
    <div class="cell" style="height: 100px"></div>
  </div>
  <div class="col">
    <div class="cell" style="height: 120px"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

scarsam · Answer 4 · 2017-04-14T21:53:34.657

I added a flex solution. Here is the fiddle I also included the HTML and CSS for it below. Let me know if it's what you're looking for!

.column-wrapper {
  display: flex;
  flex-direction: row;
}
.column-1, .column-2, .column-3 {
  display: inline-flex;
  flex-direction: column;
  padding: 10px;
  width: 100%;
} 
.box {
  background-color: red;
  height: auto;
  min-height: 100px;
  margin: 10px;
  width: 100%;
}
.box p {
  font-size: 40px;
}

<div class="column-wrapper">
  <div class="column-1">
    <div class="box">
      <p>hello and good luck!</p>
    </div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="column-2">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="column-3">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

score 0 · Answer 5 · answered Apr 14 '17 at 21:38

you can use masonry js for a quick solution. Here is a sample of masonry LiveOnFiddle

$( function() {

    $('#container').masonry({
        itemSelector: '.item',
    
    });

});

#container {
  border:1px dotted black;
    padding: .3em;
}

.item {
    width: 60px;
    height: 60px;
 
    margin: 5px;
    background: red;
     
}

.item.w2 {
    width: 130px;
      background: blue; 
}

.item.h2 {
    height: 130px;  background:green;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script>
<div id="container">
  <div class="item"></div>
  <div class="item w2"></div>
  <div class="item"></div>
  <div class="item w2"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item w2 h2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item w2"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item h2"></div>
</div>

He says his elements are within columns and I don't think Masonry applies here. — Rob, Apr 14 '17 at 21:59

score 0 · Answer 6 · answered Apr 14 '17 at 21:49

0

This layout is known as Masonary. I've used this JQuery plugin to achieve this layout: http://masonry.desandro.com/

answered Apr 14 '17 at 21:49

Stephen Lane

132
8

How to position a list of divs vertically within columns?

6 Answers6