Alinear imágenes correctamente en una grilla sin usar tablas con HTML y CSS

Es bien posible que en más de una ocasión hayáis tenido que colocar imágenes una detrás de otra formando filas y columnas. Algo como lo que muestro a continuación:

¿Cuál es el problema? Si lo hacéis a mano directamente con HTML y CSS sin usar una galería o un framework que te la cree correctamente, os habréis peleado para dejarlas perfectamente alineadas.

Personalmente he probado de todo, desde obligar a alturas, márgenes, padding, float, etc. a incluir más div y nada, hasta que leí esta pregunta del genial Stackoverflow.

¿Qué estructura tenemos que seguir para llegar a esta solución?

El siguiente HTML:

<div class="wrapper"> 
  <div> 
    <img><img><img><img><img><img> 
  </div> 
</div>

Y el siguiente CSS (traduzco los comentarios):

.wrapper {
    overflow:hidden;
    width:320px;
}
.wrapper div {
    /* cualquier altura mayor que el total de sumar la anchura de las img */
    width:330px;

    /* para evitar el margen superior de la primera fila */
    margin-top:-10px;
}
img {
    width:100px;
    height:75px;
    float:left;
    margin:10px 10px 0 0;
}