Responsive Grid Layout & Card Design for WordPress Archives

These two CSS snippets will help you create a responsive grid layout and gorgeous card design for your blog page, archive and category pages.

Free resources included:

  • Custom CSS

In this tutorial, we learned how to quickly create a responsive grid for any WordPress archive page. I used GeneratePress for this tutorial, but you can change the selectors to work with any theme.

Learn more: Learn how to use Chrome DevTools to inspect the front-end, see what CSS classes your site has available, and test custom CSS code.

Freebies!

Get the CSS code used in the video (below)

Create the Main Grid

This code creates the column layout which will hold as many ‘cards’ as you need. It auto-resizes to fit the available space by using the auto-fit and minmax properties on the grid-template-columns rule.

Learn more:

/* post grid auto-columns */ .archive #main, .blog #main { display: grid; /*creates the grid*/ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /*responsive columns*/ grid-gap: 20px; /*gap between cards*/ } /* stretch first grid item to full-width (if needed). Required for GeneratePress */ .archive #main .page-header, .blog #main .page-header { grid-column: 1 / -1 }
Code language: CSS (css)

Create the Article Card Design

/* grid for the card layout*/ .archive #main .inside-article, .blog #main .inside-article { height: 100%; display: grid; grid-template-rows: auto 1fr auto; transition: all .2s; } .archive #main .inside-article, .blog #main .inside-article { border:1px solid #ddd; border-radius: 8px; overflow: hidden; } /* aspect ratio images */ .archive #main .inside-article .post-image img, .blog #main .inside-article .post-image img { aspect-ratio: 16/9; object-fit: cover } /* hide post excerpt */ .archive #main .inside-article .entry-summary, .blog #main .inside-article .entry-summary { display: none; } .archive #main .inside-article h2.entry-title, .blog #main .inside-article h2.entry-title { font-size: 27px; font-weight: 600; } .archive #main .inside-article:hover, .blog #main .inside-article:hover { box-shadow: 0 0 20px rgb(0,0,0, .2); border-color: lightblue; } .archive #main .inside-article:hover .post-image img, .blog #main .inside-article:hover .post-image img { transform: scale(1.04); } .archive #main .inside-article .post-image img, .blog #main .inside-article .post-image img { transition: transform .2s; } .archive #main .inside-article .post-image , .blog #main .inside-article .post-image { overflow: hidden; aspect-ratio: 16/9; }
Code language: CSS (css)

4 thoughts on “Responsive Grid Layout & Card Design for WordPress Archives”

    • You can’t just copy and paste the code since it was written for Generatepress. You have to inspect your own front-end code as shown in the video and adapt it to your theme’s markup.

      Reply
  1. This is fantastic, it works a treat.

    Just one observation, I am using the same theme as you so was able to copy and paste the CSS as is.

    I’ve noticed though that I need to adjust the following parameters otherwise the postcard do not have any space in the top and bottom and run into each other.

    /* grid for the card layout*/
    height: 84%;

    Also I noticed in Chrome and Edge but not Firefox, that the images in the postcard have a millimetre of space on the right hand side. Obviously this disappears as I hover over but was wondering if this can be corrected?

    Thanks,

    Reply
    • I’m glad the CSS is working for you. I’m not sure if you’re using the CSS grid layout shown in the video, or just using GeneratePress pro’s column layout, but there should be spacing using my full code thanks to the grid-gap value of 20px between cards.

      As for as the 1 pixel of image space, there are a couple things to try:

      1. Make sure your browser zoom is set to 100%. Chrome can cause weirdness with box sizes and borders at other zooms
      2. Set the image to display:block instead of its default as an inline element
      3. Set the image to object-fit:cover
      Reply

Leave a Comment