Grid alignment issue

Question

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 ?

score 0 · Answer 1 · edited May 23 '17 at 11:54

0

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

edited May 23 '17 at 11:54

Community

1
1

answered Apr 25 '17 at 03:59

Yudi Chang

428
7
17

Thanks for answering ! I am trying to get it to work with your proposition but can't seem to get the wanted effect yet :/ Can you perhaps give a Snippet Code like Michael did of your solution ? – Jack Swindle Apr 25 '17 at 04:29
Ah Thanks for the link ... turns out can't be done with just CSS :/ ! – Jack Swindle Apr 25 '17 at 04:42

Michael Coker · Accepted Answer · 2017-04-25T16:12:34.593

0

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>

edited Apr 25 '17 at 16:12

answered Apr 25 '17 at 04:05

Michael Coker

52,626
5
64
64

Thanks for answering, I understand i probably wasn't clear enough :S The flex table isn't what i want because i would like to keep each div at different heights. And the `clear: left` solution seems to basicly do the same thing as i already have :/ Basicly in the solution(if i take your first table) , They would be no gap between 1,2,3,4 and 5,2lines,7,8 – Jack Swindle Apr 25 '17 at 04:26
Turns out the wanted effect i was looking for can't be done with just CSS :/ http://stackoverflow.com/questions/32102623/forcing-div-stack-from-left-to-right#32102623 http://stackoverflow.com/questions/5234749/css-floating-divs-at-variable-heights Thanks for the detailed answer still ! – Jack Swindle Apr 25 '17 at 04:43
@JackSwindle oh, you want a masonry layout? you can use css columns http://w3bits.com/css-masonry/ – Michael Coker Apr 25 '17 at 16:09
Yes sorry i didn't know it had a name :S I used Isotope plugin in the end (didn't see your comment ) But very nice CSS solution i didn't know about `colum-count`propriety ! – Jack Swindle Apr 25 '17 at 18:33
Only problem is the way that it orders the divs :/ It doesn't go from left to right – Jack Swindle Apr 25 '17 at 18:42
@JackSwindle yeah it isn't always ideal, but it's the closest CSS will do to the masonry/isotope plugins. – Michael Coker Apr 25 '17 at 18:43

ChemicalRomance · Answer 3 · 2017-04-25T04:58:46.187

0

.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.

edited Apr 25 '17 at 04:58

answered Apr 25 '17 at 04:52

ChemicalRomance

1
1

Thx for the answer ! the problem is that i want the order of the div to go from left to rigth. In the end i went with Isotope plugin, seems to be the most straight-forward to go – Jack Swindle Apr 25 '17 at 18:59

Grid alignment issue

3 Answers3