El "Grid" perfecto

Andan los diseñadores Web a vueltas todo el día con el diseño perfecto, tanto por lo que se refiere a los stándares HTML, como en lo que afecta al CSS. Y ésto... es como la dieta mediterránea o el "no me encienda, que sí lo haga, las luces del coche en carretera y fuera de túneles".
Es decir: que al final se trata de modas que cambian en menos de lo que nos cuesta soltar un suspiro.
Lo cierto es que, de todo lo que se nos propone, vamos aprendiendo cosinas y matizando, o perfeccionando, nuestros diseños.

Aquí tenemos unas bases para tener una perfecta distribución de nuestras tablas, p.e., para contener imágenes en galería. Cada quien, que juzgue si para él es la perfecta solución (a mi juicio no lo es, desde luego, para IE7):

Una especie rara... diseñada con Gimp

Margarita, a mi manera, con Gimp

Un tren con reflejos metálicos

Una rosa en capullo. Producto de pruebas con Gimp, y convenientemente mapeada...

Este es el CSS:

.grid {
display: table;
border-spacing: 4px;
}
.row {
display: table-row;
}
.image {
display: table-cell;
width: 240px;
background-color: #000;
border: 8px solid #000;
vertical-align: top;
text-align: center;
}
.image p {
color: #fff;
font-size: 85%;
text-align: left;
padding-top: 8px;
}

.- Y el HTML:

<div class="grid"> <div class="row"><div class="image"><img src="http://.../Malva.png" width="200" height="200" alt="Violeta" /><p>Una especie rara... diseñada con Gimp</p></div><div class="image"><img src="http://.../Margarita246.png" width="200" height="200" alt="Margarita" /><p>Margarita, a mi manera, con Gimp</p></div></div><div class="row"><div class="image"><img src="http://.../Tren.png" width="200" height="200" alt="Tren" /><p>Un tren con reflejos metálicos</p></div><div class="image"><img src="http://.../Cap.png" width="200" height="200" alt="capullo de rosa" /><p>Una rosa en capullo. Producto de pruebas con Gimp, y convenientemente mapeada...</p></div></div></div>