• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WriteNowDesign - Wordpress and Ecommerce Website Design

WordPress, Joomla, Ecommerce Website Design

  • Home
  • Prices/Packages
  • WordPress
  • Services
  • Portfolio
  • Blog
  • About
    • Testimonials
    • Locations
    • Online Payment
  • Contact
  • Show Search
Hide Search

Call 303-907-6133 Email

How to create an image grid using CSS and paragraphs

Creating an Image Grid with CSS and Paragraphs

April 20, 2012 by Pat Fortino

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:

Image Grid Using CSS

Comments are closed. If you have information to share, contact me here.

Previous Post: « Review: Yootheme WidgetKit for Joomla or WordPress
Next Post: How to Add Extra Fields to Joomla 2.5 Registration Form »

Reader Interactions

Comments

  1. Pingowanie says

    June 30, 2012 at 7:41 pm

    You saved me few hours of work with this article. Grids are very useful on webpages. I want to use them for partner logos!

    Thanks a lot!

    Szymon

  2. Lianne says

    January 3, 2013 at 3:04 am

    Hi,
    #grid img {vertical-align:middle; width: 150px; height: 138px; } saves you even more time!
    greetings Lianne

  3. Tony says

    January 28, 2013 at 6:24 pm

    Is there a way to add another line under the image to display some text?

Related

Primary Sidebar

Blog Categories

Call Today

Get a Free Quote

303-907-6133

Subscribe to News

News about WordPress, WooCommerce, & Technology

What’s New

  • WPForms Not Sending Notifications
  • Add Terms and Conditions WooCommerce
  • Fix WordPress AMP Validation Errors
  • Use the Classic Editor with Gutenberg Block Editor
  • Add a Message at Top or Bottom of WooCommerce Checkout Page
  • How to Link to a PDF in WordPress

Find Us On…

  • Facebook
  • LinkedIn
  • RSS

Call 303-907-6133 Email

© 2004–2023 · WriteNowDesign · Sitemap · Log in · Return to Top