Card Layout for the Post Grid Shortcode (SCSS)
Styles the [post_grid] shortcode output as clean cards with rounded images, a subtle shadow on hover and clamped excerpts, respecting reduced-motion settings.
Opens WPIDE on
Code
$radius: 10px;
$excerpt-lines: 3;
.post-grid {
.post-grid-card {
overflow: hidden;
border-radius: $radius;
background: color-mix(in srgb, currentColor 4%, transparent);
transition: box-shadow 0.2s ease;
&:hover,
&:focus-within {
box-shadow: 0 6px 20px rgb(0 0 0 / 12%);
}
> :not(a) {
margin-left: 1rem;
margin-right: 1rem;
}
}
.post-grid-title {
margin-top: 0.75rem;
font-size: 1.15em;
a {
color: inherit;
text-decoration: none;
}
}
.post-grid-excerpt {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: $excerpt-lines;
line-clamp: $excerpt-lines;
font-size: 0.95em;
}
}
@media (prefers-reduced-motion: reduce) {
.post-grid .post-grid-card {
transition: none;
}
}Notes
Change $radius and $excerpt-lines to taste.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.