Grid alignement issue

Asked by At

I have a page which has a grid with 5 equal columns; each column has n boxes of different heights.

So the bottom of this grid is all chopped up, each row finishes at different heights.

<div class="row">...</div>
<div class="row">...</div>
<div class="row">...</div>
<div class="row">...</div>
<div class="row">...</div>

and CSS

.row {
   display: inline;
   float: left;
   width:20%
}

I later want to add more boxes to these rows (AJAX) with again with

<div class="row">...</div>
<div class="row">...</div>
<div class="row">...</div>
<div class="row">...</div>
<div class="row">...</div>

The problem is that these new boxes don't just fit under each row like i was expecting but instead all align there top with the lowest row from the previous rows.

visual example here of issue

With what CSS do I bypass this problem ?

3 Answers

0
Michael Coker On Best Solutions

If you're looking for a "masonry" layout in CSS, you can use CSS columns

.rows {
  column-count: 4;
  column-gap: 1em;
}

.row {
  background-color: #eee;
  display: inline-block;
  margin: 0 0 1em;
  width: 100%;
}
<div class="rows">
  <div class="row">1</div>
  <div class="row">2</div>
  <div class="row">3</div>
  <div class="row">asdf<br> aasdf
  </div>
  <div class="row">4</div>
  <div class="row">5</div>
  <div class="row">2<br>lines</div>
  <div class="row">7</div>
  <div class="row">two<br> lines</div>
  <div class="row">8</div>
  <div class="row">9</div>
  <div class="row">1</div>
  <div class="row">2</div>
  <div class="row">3</div>
  <div class="row">asdf<br> aasdf
  </div>
  <div class="row">4</div>
  <div class="row">two<br> lines</div>
  <div class="row">6</div>
  <div class="row">7<br>lines</div>
  <div class="row">7.5</div>
  <div class="row">8</div>
  <div class="row">9</div>
  <div class="row">1</div>
  <div class="row">2</div>
  <div class="row">3</div>
</div>

0
Yudi Chang On

If you don't mind height different, use display:inline-block and vertical-align: top instead of float left. this one caused by different height of each "row" element.

.row{
   display: inline-block;
   vertical-align: top;
   width:20%;
}

you can also consider to make each element same height using either flex or javascript in which, you check which div has the highest height and apply it to all element.

if you want it to have different height and want it to fill the gap, please refer to this question

CSS Floating Divs At Variable Heights

0
ChemicalRomance On

.multiple-column{
  list-style: none;
  padding: 0;

  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
}
.multiple-column li{
  background: gray;
  margin-bottom:10px;
}
<ul class="multiple-column">
  <li style="height: 100px">A</li>
  <li style="height: 200px">B</li>
  <li style="height: 150px">C</a></li>
  <li style="height: 120px">D</li>
  <li style="height: 120px">E</li>
  <li style="height: 60px">F</li>
</ul>

The browser needs to support the CSS3.