Tightly pack a grid of list items in HTML - html

Question

For part of a site I'm making, I'm looking to have a grid of square objects, and have them pack together tightly so there's no spaces.
Here is what I have made:
But here's what I want it to look like:
So far I've only been doing this by padding and adding margins, and then by vertically aligning each list item. But I want it to go one step further than vertical alignment, I want each item to fit directly underneath the one above it.
I'm sure there's a very different, better approach than the one I've taken, which would be great too!
Here's what I have done:
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

If you're not supporting older browsers (IE 8 & 9), you could implement this with CSS columns, as shown here.
For full browser support, I'd go with the jQuery masonry plugin.