Tightly pack the grid of list items in HTML

Question

For the part of the site that I create, I look for a grid of square objects and put them together so that there are no spaces.

Here is what I did:

But here is what I want it to look like this:

So far, I have only done this by filling and adding fields, and then by vertically aligning each item in the list. But I want it to go one step further than vertical alignment, I want each element to be located directly below it.

I am sure that there is a completely different, better approach than the one I did, which is great too!

Here is what I did:

HTML:

 <header class="results">
        <ul class="container">
            <li>
                <a id="name">Temp</a>
                <a id="position">Temp</a>
            </li>
            <li>
                <a id="name">Temp</a>
                <a id="position">Temp</a>
                <a id="position">Temp</a>
            </li>
            <li>
                <a id="name">Temp</a>
                <a id="position">Temp</a>
            </li>
            <li>
                <a id="name">Temp</a>
                <a id="position">Temp</a>
            </li>
            <li>
                <a id="name">Temp</a>
                <a id="position">Temp</a>
            </li>
            <li>
                <a id="name">Temp</a>
                <a id="position">Temp</a>
            </li>
        </ul>
    </header>

CSS

body {
  margin: 0;
}
.page {
  background: #fff;
}
header.results {
  max-width: 100%;
}
header.results .container {
  padding: 1em 0 2em;
  margin: 0px auto 3px;
  line-height: 1;
}
header.results .container li {
  width: 30%;
  display: inline-block;
  padding: 2em 2em 0.75em;
  margin: 0px auto 3px;
  background: rgb(240,240,240);
  vertical-align: top;
}
header.results .container li #name {
  text-align: center;
  display: block;
  margin-top: 0.5em;
  font-weight: 500;
}
header.results .container li #position {
  text-align: center;
  display: block;
  margin-top: 0.5em;
  font-weight: 250;
  font-size: 85%;
}

Answer 1

(IE 8 9), CSS, .

, jQuery masonry plugin.