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:
- CSS Grid Guide: CSS Tricks
- Responsive Grid (auto-fit) – CSS Tricks
/* 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)
Hello. Im using classipress 3x theme on my wordpress. Im trying to use grid post layout with your code but everythings is crashing. Can you help me?
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.
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,
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-gapvalue of 20px between cards.As for as the 1 pixel of image space, there are a couple things to try:
Thank you very much! Your CSS code worked just fine. Logically I did as you recommended in the video and I had to make small changes, but it’s perfect. It got much better than the Plugins. Really grateful.
I edited it on my website:
https://clinicasrecuperacao.com/blog/
Website’s looking good!