# Equal-Height Card Grid Style (SCSS)

> Turns any Columns or Group block with the class "card-grid" into a responsive grid of equal-height cards with shadows and hover lift.

- Type: SCSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: cards, grid, scss, blocks
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-card-grid-scss/

## Code

```scss
$card-min: 240px;
$card-gap: 1.5rem;
$card-radius: 10px;
$card-shadow: 0 2px 10px rgba(0, 0, 0, .08);

.card-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax($card-min, 1fr));
    gap: $card-gap;

    > * {
        display: flex;
        flex-direction: column;
        margin: 0 !important;
        padding: 1.5rem;
        border-radius: $card-radius;
        background: #fff;
        box-shadow: $card-shadow;
        transition: transform .2s ease, box-shadow .2s ease;

        > :last-child {
            margin-top: auto;
        }

        &:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        > *:hover {
            transform: none;
        }
    }
}
```

## Notes

Add the class card-grid to a Columns block. Adjust $card-min to control how narrow cards get before wrapping.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Equal-Height Card Grid Style (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/