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.
Opens WPIDE on
Code
$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 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.