# 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.

- Type: SCSS
- Runs: Site-wide header
- Category: [Custom Post Types & Fields](https://wpide.com/library/category/post-types/)
- Tags: scss, grid, cards
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/post-grid-cards-scss/

## Code

```scss
$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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Card Layout for the Post Grid Shortcode (SCSS)" in its snippet library and add it in one click; or create a new SCSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/