WP Portfolio – An Easy CSS Grid Layout

One of the frequent questions that I get asked is how to create a grid layout for our WordPress Portfolio Plugin. It’s actually pretty simple, as you just need to use floats to shift the websites around. So to make things really easy, here’s a copy’n'paste example for doing a grid layout.

To see what we’re trying to achieve, this is a live example of the grid system working.

Grid Demo

A collection of websites for the grid demo.

BBC News

http://news.bbc.co.uk

A popular destination for up-to-date news in the UK and around the World.

EnviroGadget

http://www.envirogadget.com

One of Dan's websites focusing on the best of eco-friendly gadgets.

Google

http://www.google.co.uk

The search engine that most people use.

Smashing Magazine

http://www.smashingmagazine.com

One of the most interesting design-based websites on the web.

Wordpress

http://www.wordpress.org

A slightly famous place to download a user-friendly content management tool for websites.

WP Doctors

http://www.wpdoctors.co.uk

Our very own website, where you can find info on our WordPress development services.

 

The portfolio shortcode and HTML

The HTML/shortcode you need to paste into a page or post to achieve the above layout is simply this:

<div id="portfolio-grid">
[wp-portfolio groups="1"]
<div class="footer">&nbsp;</div></div>

The portfolio shortcode and HTML

The CSS you need to give the grid layout (which can be pasted into the Template CSS section in Layout Settings in the plugin settings, or into your template’s styles.css) is below.

/* Grid Example */
#portfolio-grid .portfolio-website {
    width: 150px;
    float: left;
    height: 245px;
    border: 1px solid #BAD4E3;
    background: #E3EAF2;
    text-align: center;
    margin: 3px;
}
#portfolio-grid .website-description {
    text-align: left;
}
#portfolio-grid .website-name {
    font-size: 10pt;
}
#portfolio-grid .website-url {
    display: none;
}
#portfolio-grid .website-thumbnail {
    float: none;
    text-align: center;
    margin: 3px auto 10px;
}
#portfolio-grid .footer {
    clear: both;
}

The bits that make it work are the width of each portfolio item, the floating left, and the fixed height. All the other styles can be adjusted to suit your website.

Enjoy!
Dan