Bulletproof Gallery Style Lists
February 14, 2010 in Design Tips
Listing pages are becoming increasingly ubiquitous features of Web design as content management systems enable even the smallest sites to easily upload and archive a ton of data. While the classic vertically-oriented list may be just fine for text-heavy datasets like blog posts or press releases, many designers are turning to grid-based gallery style layouts to add visual interest to portfolios, product listings and the like. In addition to being more aesthetically pleasing, a gallery style list makes better use of screen real estate because multiple items can fit onto one row.
From a purely aesthetic standpoint, gallery style lists really are the way to go, especially if each item contains an accompanying photo or graphic of some kind. From a coding standpoint, however, creating a gallery style list poses a quite a challenge that if not tackled properly can result in a broken page that does more harm than good to the design.
In this article, we'll be creating a rock solid gallery framework using just a little CSS, some server-side logic and a dash of jQuery for standards-challenged browsers. Here's what we need it to do for us:
- We're going to assume a fixed-width layout. That is, a fixed number of items per row and a fixed width for the gallery itself. While fluid layouts are gaining popularity and may be appropriate for a site that has a massive amount of data and doesn't need to look perfect (think Newegg), what we're going for here will look more consistent and work just fine for the vast majority of sites out there, which are using a fixed-width layout.
- Each item should accommodate a variable amount of text without breaking the design.
- The gallery can handle any number of items.
- The markup must be completely semantic HTML and CSS with no cruft.
- Everything must work cross-browser (IE6 included).
- We want this to work flawlessly with a CMS, so any special classes must be added automatically via a (server-side) script.
The HTML Foundation
This is a pretty tall order, but it's nothing that can't be handled with some cleverly written CSS and a little help from jQuery. Let's not jump the gun, though. The first thing we need to do is write our markup.
This is pretty straightforward, as it is a listing page,
after all. As you can see above, we've created a purely semantic unordered
list with no unneeded markup. What's contained within the
and how many
<li> tags there are is limited only by your
imagination. In this example, we'll be creating a gallery of music albums.
Each item has a title, short description and a thumbnail of the album cover.
The CSS Structure
To get the items to
display in the gallery style, with multiple items on a row, we'll need
to give each item a fixed width and then use
float: left; so
that multiple items stack in a row from left to right. For this example,
I'll pretend that my content area is 720 pixels wide. With this width I can
get four items at 150 pixels wide each onto a row, with a 40 pixel gutter
in between items. Obviously these numbers will change from one design to
the next. What's important to remember is that the gutter should only appear
in between items and never on the outside edge. The left edge of the first
item should align precisely to the left edge of the content area, and the
right edge of the last item should align precisely to the right edge of the
content area. It's this kind of pixel perfection that will push a design
to the next level of polish and professionalism.
So far, everything has been quite straightforward, but the inclusion of
the gutter creates a problem. Since the gutter only needs to appear between items
(three gutters), adding a 40 pixel left margin to each of the four items
results in four gutters, indenting our gallery 40 pixels inward from
the edge of the content area and pushing the fourth item down
onto the next line. Not good. The solution to this is removing the
margin-left: 40px; declaration from the first item in each
row. In order to select the first item in each row using CSS, we'll need
give it a special class, as we have no
other way of differentiating these items from the rest of the items.
To keep things semantic, we'll simply assign it
We'll need to do this to every fourth item, starting with the first one
(so items 1, 5, 9, 13, etc.). If you're hand-coding a page, this is simple
enough to do at first, but would certainly get annoying if in the future
you had to remove one item from the list and then change all the special
classes. If you were using a content management system, adding the class
by hand would likely prove impossible. Instead, we'll want to use some
server-side logic to automatically assign our class.
The ExpressionEngine Goodness
Adding a class to every nth item in ExpressionEngine is extremely easy.
Our ExpressionEngine gallery template would look something like
what you see above. Inside our repeater template, which is the
switch parameter. This is a super flexible piece
of functionality that allows you to rotate between bits of code
in a fixed pattern. Each bit of code is separated by the pipe
character. Since we just need to add
the first item and not do anything to the other three items,
we just add three pipe characters after
don't put anything between them, so we have
ExpressionEngine will run through the four conditions and then
loop back to the first one as long as there are items to be
displayed, so every fourth item starting with the first will
the others will remain unchanged—exactly what we need!
This is just one application for this amazing piece of functionality.
If you use WordPress or TextPattern instead of ExpressionEngine, you'll likely need to write a bit of PHP to get this same type of function working, but it shouldn't be anything too complex. (I prefer not to write PHP for stuff like this, so I use ExpressionEngine, but I digress!)
One Last Concern
The last thing we need to do is make sure that varying amounts of text in each item don't break the grid. This occurs when there is one taller item and a shorter one after it, causing the next row to want to start underneath the shorter item rather than back at the left side of the gallery (see example below).
To achieve this, we're going to give that
first item on each row another CSS property that you might be familiar with—
This works like a reset switch and tells the browser to move
the selected item and all the items that follow it clear of
any floated elements. This ensures that a new row will only start
below the tallest item in the row before it. This technique works
flawlessly in standards-compliant browsers like Firefox, Chrome
and Safari, but unfortunately not in our arch nemesis, Internet
We now have a truly dynamic gallery style grid layout that will not break, regardless of the amount of text in a given item and which browser it's viewed in. While the logic behind creating this framework might be somewhat complex, the resulting code is very straightforward and pretty much unbreakable. It can be recycled from project to project with the only modification being the width of the gallery, items and gutters.