• Skip to primary navigation
  • Skip to main content
  • Skip to footer
amethyst website design logo

Amethyst Website Design

Affordable WordPress Website Design for Small Business

  • Home
  • About
  • Services
  • Praise
  • Portfolio
  • Blog
  • Contact »

WordPress Tutorials CSS Styles, Themes

Use CSS for Equal Height Column Post Grid

June 10, 2014 Updated on December 2, 2020 Marcy Diaz

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

Recently I was working on a WordPress theme in which I needed a grid of posts in column boxes of equal height. This is easy to do when a site is fixed width; you would just set a fixed height. When the theme is responsive, the height of the grid column will increase and each column will be a different height depending on the content. If you don’t want the stair-step look that you see in the last image this post, then you can try using this CSS-only method to create posts of equal height.

equal height posts in chrome and firefox

Themes and Plugins Use Image Thumbnails and Limit Excerpt Length

If your theme has a responsive grid, your theme or posts plugin will have thumbnail images (featured images) with a uniform size, and you can limit the WordPress content or excerpt to a specific number of characters, so the text doesn’t run over the space you allow for it, as the width of the posts gets narrower. Usually the plugin that you use for this or your theme will let you limit the excerpt length.

But What To Do With Long Post Titles

Long post or entry titles on responsive themes can be problematic, going to multiple lines and creating a taller post column, so that you get a stair-step effect.

I recently ran across a CSS declaration, new to me, that can limit any text to one line and add an ellipsis at the end, so you know there is more to it or more coming.
The declaration is: text-overflow: ellipsis;

How to Make It Work for Most Browsers

The CSS for your post or entry may be something like this:

.home .entry {
	border: 1px solid #aaa;
	float: left;
	margin: 0 1%;
	overflow: hidden;
	text-align: center;
	width: 23%;
}

Note that .home is there because I was doing this for my home page, and .entry refers to the post; some themes may use .post.

This is just a normal grid container with a 1px gray border. If your theme doesn’t have the overflow: hidden; declaration, you may want to add it, so that browsers that don’t add the ellipsis will at least cut off the text.

To truncate the post title to one line you would just add the following to the CSS for your post or entry title.

For my theme, it’s

.home .entry .entry-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

The entry-title refers to the post title; some themes may use an h2 or .post-title. The white-space declaration turns the title into one long line that essentially extends outside the post container. The overflow line hides the text that overflows the post container. The text-overflow line adds the ellipsis.

When you add this, you get the one-line titles shown in the image at the top of the post. This method will work in recent versions of Firefox, Chrome, Safari, and Internet Explorer 11. It will also just cut off the title in browsers that don’t use the ellipsis this way.

Stair-step Effect

Here is an example of the stair-step effect when the height of the posts increases as the titles go from one to two to three lines of text.

uneven height responsive posts

So that’s it, just a few line of CSS to help keep your post grid columns equal heights.

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!

Contact Marcy »

___

Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy

___

About Marcy

Marcy Diaz

I'm Marcy Díaz, the owner of Amethyst Website Design, a small business located in Phoenix, Arizona (in Ahwatukee Foothills). I help people, like you, grow your business with an affordable WordPress website design. Sign up for my blog and website tips that help you manage your own website.

Reader Interactions

Comments

  1. Marcus Tibesar says

    This was a very timely and useful article. I have implemented it for a more professional look.

    Is there a way to display the ellipses after the second line of a very long title?

    Thank you very much Marcy!

    Reply
    • Marcy Diaz says

      There are a few methods, Marcus. I think that Chris Coyier has collected most of the methods here: http://css-tricks.com/line-clampin/
      If you find one that works for you, please let us know.

      Reply

Leave a Reply Cancel reply

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

 

Footer

Meet Marcy

Marcy Diaz, Amethyst Website DesignAmethyst Website Design is a small business owned by Marcy Díaz. I help people, like you, with your website by creating an affordable WordPress website using Genesis themes to fit your business and budget. I especially love working with new and small business owners, and can help you with the online part of your business.
Read More »

Let’s Connect!

  • Facebook
  • Twitter
  • Pinterest
  • Linked In
  • GitHub

Contact Info

Amethyst Website Design

Email: Contact Marcy
Phone: 602.759.0501

PO Box 94782
Phoenix AZ 85070
Located in Ahwatukee Foothills

member of local first az
  • Sitemap
  • Cookie Policy
  • Terms and Conditions
  • Privacy Policy

© 2021   Amethyst Website Design   ◆   Log in

Using WordPress and the Genesis Framework

This site uses cookies for the best browsing experience. By continuing to use this site, you accept our Cookie Policy »OK, got it!