Making a Perfect Grid

"Making a grid of equal height elements has always been a challenge using traditional CSS layout techniques, but it’s something to which CSS tables are well suited. For example, if we want to create an image gallery comprising a grid of images withcaptions, such as the one shown in image1, using a CSS table renders the task simple.

The markup for our gallery is as follows:

Each gallery image cell is comprised of an img element and a caption in a p element contained within a div element with a class of image. Each row is contained within a div element within a class of row, and the whole gallery is containedwithin a div with a class of grid.

The CSS required to lay out our grid is simple:

The above CSS is fairly straightforward, but you might notice how we’ve made use of the border-spacing property to control the spacing of our gallery image cells.Making a grid layout couldn’t be easier—and we’ve avoided any headaches overequal heights or fragile layouts made with floated elements."

-----------From: Everything You Know About CSS Is Wrong! (www.sitepoint.com)