Responsive Grid Layout w/ Card Design for WordPress Archive & Category Pages (pure CSS)

by | Aug 22, 2021 | 0 comments

Responsive Grid Layout w/ Card Design for WordPress Archive & Category Pages (pure CSS)

by | Aug 22, 2021 | CSS Tips and Tricks | 0 comments



Transform your boring category page into a beautiful grid layout and card templates for your posts. All it takes is a few lines of CSS and the magic of CSS Grid.
🚀 Superfast VPS Hosting (Free trial) https://cwdeal.com/grid

▸▸Learn CSS Grid (resources)
– Complete Grid Guide: https://css-tricks.com/snippets/css/complete-guide-grid
– CSS grid in 20 minutes: https://www.youtube.com/watch?v=9zBsdzdE4sM

Here’s the CSS. It’s written for both the archive and blog pages.

/* post grid auto-columns */
.archive #main, .blog #main {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 20px; /*gap between cards*/
}

/*stretch first grid item full-width. Needed for Generatepress, but most other themes won’t */
.archive #main .page-header, .blog #main .page-header {
grid-column: 1 / -1
}

/* 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;
}

source

[newsletter_form]
<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-1">First name or full name</label> <input class="tnp-name" type="text" name="nn" id="tnp-1" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-2">Email</label> <input class="tnp-email" type="email" name="ne" id="tnp-2" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>