Creating an Image Grid with CSS and Paragraphs

I was working on a sponsors page for a non-profit client and needed a quick, easy way to layout the sponsor logos in a grid. Of course I could do it with tables, but I wanted simpler code and something that was easier for the client to maintain.

I came up with a few CSS rules that made it very easy to create a grid using paragraphs with one image in each paragraph. Keep in mind that the images need to be small enough to allow them to fit in a grid on the page.

Here’s how I did it:

First, here’s the html code:

<div id="grid">
<p><img alt="Image 1" src="/images/image1.png" width="150" height="138" /></p>
<p><img alt="Image 1" src="/images/image2.png" width="150" height="138" /></p>
<p><img alt="Image 1" src="/images/image3.png" width="150" height="138" /></p>
<p><img alt="Image 1" src="/images/image4.png" width="150" height="138" /></p>
<p><img alt="Image 1" src="/images/image5.png" width="150" height="138" /></p>
<p><img alt="Image 1" src="/images/image6.png" width="150" height="138" /></p>
</div>

Now I needed a couple css rules to create the grid layout.

#grid p {float:left; width:30%; padding-right:15px; line-height:150px; }
#grid img {vertical-align:middle;}

I will explain how the rules work.

#grid p:

• float: left makes each paragraph block align to the left in the content column.
• width: 30% sets the paragraph width. This allows for 3 images per row. If you have more horizontal room, you can adjust the percent; for example, if you have room for 4 images per row, use width: 25%. 
• padding-right: 15px Add padding to the right side of the paragraph so the images have some white space between them. You might have to adjust the width and padding to best fit the horizontal space you are working with.
• line-height: 150px Because my images were different heights, I used line height to make all the image line up in a row. The next rule, #grid img, forces the image to align in the verticle middle of the paragraph line height.

Here’s how the page looks: