There's something to be said for symmetry. When done well, it helps designs look planned. Take the humble team photo page. If you have eight people in a three-wide grid, then it looks a little odd. Luckily, there's a way around that. Here's how to center an uneven number of items in your team layout with Foundation.

 

1. Set up the centered base

Given that the layout calls for three photos across, we could use a custom three-column grid. But for reasons that will become clear, instead we'll use a standard twelve-column grid.

First we need an overall container. We'll use a small-6 grid, centered, to make the layout nice and compact.

<div>
  <div class="small-6 small-centered columns">…</div>
</div>

2. Add an inner grid

Next we add two rows with room for three team images each.

<div>
  <div class="small-6 small-centered columns">
    <div>
      <div class="small-4 columns">…</div>
      <div class="small-4 columns">…</div>
      <div class="small-4 columns">…</div>
    </div>
    <div>
      <div class="small-4 columns">…</div>
      <div class="small-4 columns">…</div>
      <div class="small-4 columns">…</div>
    </div>
  </div>
</div>

3. Add the last row

The final row — the one that's "missing" a pic — nudges its contents in with the push/pull classes.

<div>
  <div class="small-6 small-centered columns">
    <div>
      <div class="small-4 columns">…</div>
      <div class="small-4 columns">…</div>
      <div class="small-4 columns">…</div>
    </div>
    <div>
      <div class="small-4 columns">…</div>
      <div class="small-4 columns">…</div>
      <div class="small-4 columns">…</div>
    </div>
    <div>
      <div class="small-4 push-2 columns">…</div>
      <div class="small-4 pull-2 columns">…</div>
    </div>
  </div>
</div>

The push/pull are why we needed a base-12 grid: While the layout appears to have three columns, it really needs to nudge the last two a little ways in. The result is a symmetrical layout that doesn't seem to have left anyone out.

Now all that's left is to decide whose pictures get the top row.

---