Post Card Grid

The Post Card Grid lays posts out as cards of equal width. You give it the cards; the grid shares the width between them, wraps to a new row when they run out of room, and keeps their titles and excerpts level across a row.

What it is for

Use the grid wherever a page lists more than one post: a blog index, a category page, a row of related reading under an article. The grid holds the cards; a card holds one post.

The card is its own module, with its own demo page. Here we look at the grid around it: how many cards it puts in a row, how much space it leaves between them, and how wide it grows.

The source

A grid holds one card per post. This is the grid with a single card inside it; the words in capitals are the placeholders you replace with the post's own image, category, title and excerpt. Copy the card once per post:

<div class="module-post-card-grid">

  <div class="module-post-card">
    <a class="module-post-card-article-featured-image" href="POST-URL">
      <img src="IMAGE-URL" alt="IMAGE-DESCRIPTION" width="WIDTH" height="HEIGHT">
    </a>
    <span class="module-post-card-categoryplate-frame"><span class="module-post-card-categoryplate"><a class="module-post-card-article-category" href="CATEGORY-URL">CATEGORY</a></span></span>
    <div class="module-post-card-title-frame">
      <h3 class="module-post-card-article-title"><a href="POST-URL">TITLE</a></h3>
    </div>
    <div class="module-post-card-excerpt-frame">
      <p class="module-post-card-article-excerpt">EXCERPT</p>
    </div>
  </div>

  <!-- one more module-post-card per post -->

</div>

How many cards per row

You set the number of cards in a row with a second class next to "module-post-card-grid". Leave it off and you get four cards per row, the default. Add a class from "--2" to "--6" for that many:

"module-post-card-grid--2" puts two cards in a row, the widest the cards get.
"module-post-card-grid--3" puts three in a row.
"module-post-card-grid--4" puts four in a row. Same as the default.
"module-post-card-grid--5" puts five in a row.
"module-post-card-grid--6" puts six in a row, the narrowest the cards get.

Each setting brings its own spacing: two large cards get more space around them than six small ones. You never set that space yourself. The rest of this page shows each setting in turn, starting with the widest cards.

Two cards per row

"module-post-card-grid--2" The widest the cards get, with the most room for an image and a longer excerpt.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

Rain

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

Notes From a Quiet Studio

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

What the Machines Cannot Say About the Weather in Autumn

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

Three cards per row

"module-post-card-grid--3" A comfortable middle, common on a blog index where three posts sit side by side.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

Rain

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

Notes From a Quiet Studio

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

What the Machines Cannot Say About the Weather in Autumn

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

A Longer Title That Wraps

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

Sea

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

Four cards per row

"module-post-card-grid--4" Four in a row, the same as the default. Write the class out when you want the count spelled out in the markup.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

Rain

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

Notes From a Quiet Studio

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

What the Machines Cannot Say About the Weather in Autumn

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

A Longer Title That Wraps

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

Sea

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

The Deluge Was Only the Beginning

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

Notes From the Far Side of a Long Winter

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

Five cards per row

"module-post-card-grid--5" The cards grow narrow, so the image does more of the work and titles wrap to an extra line sooner.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

Rain

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

Notes From a Quiet Studio

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

What the Machines Cannot Say About the Weather in Autumn

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

A Longer Title That Wraps

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

Sea

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

The Deluge Was Only the Beginning

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

Notes From the Far Side of a Long Winter

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

Fog

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

What Remains When the Water Goes Down Again

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

Six cards per row

"module-post-card-grid--6" The narrowest the cards get. Even on a wide screen a card here can be around 245px, much narrower than the window alone would give you, so the type inside steps down to fit.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

Rain

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

Notes From a Quiet Studio

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

What the Machines Cannot Say About the Weather in Autumn

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

A Longer Title That Wraps

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

Sea

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

The Deluge Was Only the Beginning

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

Notes From the Far Side of a Long Winter

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

Fog

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

What Remains When the Water Goes Down Again

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

A Quiet Room

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

Letters Never Sent

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

Inside a full-width column

The grid has no width of its own. It takes the width of whatever holds it. Here a three-card grid sits in a full-width column, so it stretches to both edges of the page while the cards keep sharing the width evenly.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

Rain

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

Notes From a Quiet Studio

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

What the Machines Cannot Say About the Weather in Autumn

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

A Longer Title That Wraps

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

A flooded city under a heavy sky, skyscrapers half submerged

Visual Art

Sea

A line or two of the article's own opening, set here to show how the excerpt wraps and where a card draws the line on length.

The source

This is the grid, empty, with a note where the cards go. Set the per-row count with a second class when you want something other than four, and drop in one card per post from the card module:

<div class="module-post-card-grid">

  <!-- one module-post-card per post goes here -->

</div>

The card is its own module. Copy one card per post into the grid, and the grid does the rest: it shares the width, wraps the rows and keeps the cards level.