How to easily align block divs of different sizes?

Question

I want to create a so-called grid div.

Currently my div fields are not aligned correctly. Div boxes of varying heights cause a large vertical space between some divs. Div boxes also go to the right.

I want the div fields to keep the same edge from each other regardless of the height of the boxes and so that they are located to the left of it.

I want the div fields to align something like this:

Here is an example of what is happening: http://jsfiddle.net/P4S8z/

HTML:

<div class="container">

  <div class="box" style="height:225px;">
    <h3>Blah blah</h3>
  </div>

  <div class="box" style="height:160px;">
    <h3>Blah blah</h3>
  </div>

  <div class="box" style="height:200px;">
    <h3>Blah blah</h3>
  </div>

  <div class="box" style="height:180px;">
    <h3>Blah blah</h3>
  </div>

  <div class="box" style="height:150px;">
    <h3>Blah blah</h3>
  </div>

  <div class="box" style="height:170px;">
    <h3>Blah blah</h3>
  </div>

</div>

CSS

.container {
position: relative;
float: left;
margin: 0;
}

.box {
position: relative;
display: block;
float: left;
width: 250px;
margin-left: 1.5em;
margin-bottom: 0.5em ;
padding: 0 10px 0;
color: #666;
background: #fff;
border: 1px solid #d2d2d2;
border-radius: 3px;
}

.box h3 {
position: relative;
display: block;
height: 20px;
line-height: 1.3em;
width: 260px;
margin: 0;
padding: 5px 10px;
left: -15px;
top: 8px;
color: #cfcfcf;
text-shadow: 0 1px 1px #111;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background: #333;
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

Answer 1

The easiest way I can use pure CSS is to label the columns.

"" div divs .

: http://jsfiddle.net/Renson/P4S8z/4/

,

HTML

<div class="container">
<div class="subcontainer">
    <div class="box" style="height:225px;">
        <h3>Blah blah</h3>
    </div>
    <div class="box" style="height:180px;">
        <h3>Blah blah</h3>
    </div>
</div>
<div class="subcontainer">
    <div class="box" style="height:160px;">
        <h3>Blah blah</h3>
    </div>
    <div class="box" style="height:200px;">
        <h3>Blah blah</h3>
    </div>
    <div class="box" style="height:150px;">
    <h3>Blah blah</h3>
    </div>
    <div class="box" style="height:170px;">
    <h3>Blah blah</h3>
    </div>
</div>

CSS

.subcontainer{
    float: left;
}

Answer 2

CSS:

.container {
    column-count: 3;
}

, : https://caniuse.com/#search=column-count

Answer 3

- : (, 6 )       #subcontainer > div {            ;           : ;           margin: 0 20px 0 0;       }       #subcontainer > div: nth-of-type (6n + 6) {       margin-right: 0;       }

    #ids or .classes with height and width {
    ...
    }

, 6- #subcontainer , div