对齐html网格项目以垂直包装

Question

I have a grid of generated divs that I need to flow 0 - 9 vertically, and then wrap 10 and on to the next column. The current configuration is wrapping horizontally:

HTML

<div id="item-container"></div>

JavaScript:

for (var i = 0; i <= 150; i++) {
  $("<li class='items grid'>item " + i + "</li>").appendTo("#item-    
  container"); 
}

CSS

li.grid {
      display: inline-block;
      border: 1px solid #333;
      background-color: #000;
      color: #fff;
      padding: 30px 30px 30px 30px;
      background-image: linear-gradient(to bottom right, #eee, #ddd);
    }

Current implementation in jsfiddle: http://jsfiddle.net/Ldh9beLn/9/

Answer 1

Normal flow of the HTML elements is horizontal for inline and inline-block elements. What you try to achieve is related to columns. You need to divide your item-container element into columns.

The first option is to use CSS3 column-count or flex.

#item-container{
  column-count: 4;
}

If you need support old browsers too, you may implement js fallback. There is a jquery plugin that might help you.

The second option is to divide your elements into columns using a container element. Wrap every 10 elements inside a column and use appropriate css for the column wrapper as below;

for (var i = 0; i <= 150; i++) {
    if(i%10 == 0) $("<div class='column'></div>").appendTo("#item-container");
  $("<li class='items grid'>item " + i + "</li>").appendTo("#item-container > .column:last-child");
}

.column{
  width: 35px;
  border: 1px solid;
  float: left;
  margin: 30px;
}

Answer 2

I figure out the solution, but creating two classes to toggle between column1 and column7 , depending on the grid layout required.

$('.item-container').removeClass('column7').addClass('column1');

and

$('.item-container').removeClass('column1').addClass('column7');

with the associated css classes:

.column1{
  column-count: 1;
}
.column7{
  column-count: 7;
}