CSS Equal Height Cards with Vertically Aligned CTA

by | February 14, 2021 | CSS, Website Design, Website Development

This page may contain affiliate links to recommended products or services. If you choose to purchase after clicking a link, I may receive a commission at no additional cost to you.

Last updated on: May 22, 2023

Update: Here’s a simple way to achieve the effect using CSS Flexbox that can be applied to almost any WordPress page builder, blocks, Gutenberg, WPBakery, Divi, etc. Each of those systems allows you to have a row or a group to use as a container for items or columns that you can place a text and button module inside. The following HTML and CSS are simplified and highly adaptable.

Check out the CodePen demo.

See the Pen Equal Height Columns with Vertically Aligned Buttons CSS Flexbox by Floyd Hartford (@floyd) on CodePen.

HTML

<div class="flex-container">
  <div class="flex-item card">
    <div class="module module--text">
      <h2>Card Headline</h2>
      <p>Lorem ipsum dolor...</p>
    </div>
    <div class="module module--button">
      <button>Click Me</button>
    </div>
  </div>

... add more columns, as needed ...
</div>

CSS

.flex-container {
  display: flex; // flexible container
  flex-flow: row nowrap; // create a row of columns
  justify-content: space-between; // equalize column horizontal spacing
  align-items: stretch; // equalize column height
}

.flex-item {
  flex: 0 1 31%; // column width
  margin: 10px 7.5px; // 15px gap between columns
  padding: 40px 25px; // padding for visual effect
  display: flex; // column behavior
  flex-flow: column; // column direction
  min-height: 400px; // for visual effect
}

.module--text {
  flex: 1 0 auto; // grow text module to fill vertical space
}

.module--button {
  flex: 0 0 auto;
 // anchor button module at bottom of column
}

Equal Height Content Cards Overview

Content Cards are grid-like content boxes that typically have a border and look visually similar to a playing card or business card. There are many websites that display content using cards. How can you code equal-height content cards — like pricing tables — with a vertically aligned call-to-action button?

Most websites that use card-style content layouts display three to five cards per row for desktop screens and collapse down to single-column layouts for mobile devices. Card layouts are extremely popular for article-based blog websites, as well as product-based ecommerce websites that like to place as much information as possible higher up on the screen — above the scroll.

The Problem with Equal Height Content Cards

A common problem arising when using card-style layouts is that not every card has the same amount of content. In a website design’s preview template, everything always looks perfect and beautifully laid out. But, that’s not usually how content plays out in the practice.

Non-Equal Height Cards

In real life, titles, headlines, and blurbs use different character counts and line lengths. Some cards stretch too tall and others appear short. That’s what happens when different cards contain different amounts of content. Cards containing dynamically generated content and featuring call-to-action buttons can result in a vertical look that doesn’t line up.

The CSS Solution to Equal Height Content Cards

Equal Height Cards Using Flex-box (GOOD)

Flexbox CSS layouts with an align-content property set to “stretch” offer a quick fix.

.card-grid {
	display: flex;
	align-items: stretch;
}

Vertically Aligned Action Buttons

You could leave all the calls-to-action relatively positioned and keep them an equal distance from the bottom of the content, but doing that makes a user’s eyes jump all over the place and just doesn’t look great. A better more visually appealing solution is vertically aligning call-to-action buttons. That way each CTA button is the same distance from the bottom of a card instead of the bottom of the content.

Absolute Positioned CTA Buttons

One of my favorite CSS tricks for vertically aligning call-to-action buttons within a grid-style card layout is to absolutely position them. I like adding bottom-padding to the card’s container. It creates consistently available space for the button to fill and be positioned in.

Absolutely positioned CTA buttons combined with equal-height cards help you to maintain vertical rhythm and stay consistently aligned — in my opinion, giving your website a more professional look and feel.

Code Solution

Here’s a code snippet to create equal-height card grids with vertically aligned CTA buttons using CSS flex-box and absolute positioning:

CSS

.card-grid {
	display: flex;
	align-items: stretch;
}

.card {
	width: 31.33%;
	margin: 0 1%;
	border: 1px solid #ccc;
	padding-bottom: 60px;
}

.card__inner {
	padding: 20px;
}

.cta {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
}

Here’s how the styles work:

  • Creates a three-column flex-box card grid layout
  • Creates bordered cards with 20px inner padding space
  • Adds 60px of bottom padding to allow space for a  button
  • Absolutely positions a call-to-action (CTA) button 20px from the bottom
  • Centers the absolutely positioned button horizontally using left 50%, translateX(-50%)

HTML

<div class="card-grid">
	<div class="card">
		<div class="card_inner">
			<h2>Card Headline</h2>
			<p>Lorem ipsum...</p>
			<span class="cta"><button>Take Action</button></span>
		</div>
	</div>
	
	<div class="card">
		<div class="card_inner">
			<h2>Card Headline</h2>
			<p>Lorem ipsum...</p>
			<span class="cta"><button>Take Action</button></span>
		</div>
	</div>
	
	<div class="card">
		<div class="card_inner">
			<h2>Card Headline</h2>
			<p>Lorem ipsum...</p>
			<span class="cta"><button>Take Action</button></span>
		</div>
	</div>
</div>

Demo

See the Pen Aligning CTA Buttons in Grid Layouts by Floyd Hartford (@floyd) on CodePen.

Floyd Hartford is a website developer from southern Maine. He's focused on creating and building WordPress websites and loves spending time digging into code like HTML, CSS, scss, jQuery, PHP, and MySQL.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

12 + nineteen =

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Looking for WordPress Help?

I’m a freelance web developer specializing in small business and corporate marketing websites.

Pin It on Pinterest