numerada - ul html

Apretar bien una grilla de elementos de la lista en HTML

Question

Para parte de un sitio que estoy haciendo, estoy buscando tener una cuadrícula de objetos cuadrados, y hacer que se agrupen bien para que no haya espacios.

Esto es lo que hice:

Pero aquí es lo que quiero que se vea:

Hasta ahora solo he estado haciendo esto rellenando y agregando márgenes, y luego alineando verticalmente cada elemento de la lista. Pero quiero que vaya un paso más allá de la alineación vertical, quiero que cada elemento encaje directamente debajo del que está encima.

Estoy seguro de que hay un enfoque muy diferente y mejor que el que he tomado, ¡que también sería genial!

Esto es lo que hice:

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

Si no está soportando navegadores más antiguos (IE 8 y 9), podría implementar esto con columnas CSS, como se muestra aquí.

Para una compatibilidad total con el navegador, elegiría el plugin jQuery masonry .