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