Skip to content
All Answers
Layout

How do I make card grids equal height on Squarespace?

Squarespace 7.1 summary blocks and grid sections don't enforce equal card heights by default, so cards with different amounts of content end up at different heights. Flexbox fixes this.

By setting the grid container to display: flex with flex-wrap and the children to flex: 1, all cards in each row stretch to match the tallest card automatically.

.summary-block-wrapper .summary-block-collection {
  display: flex;
  flex-wrap: wrap;
}
.summary-block-wrapper .summary-item {
  display: flex;
  flex-direction: column;
}
.summary-block-wrapper .summary-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.summary-block-wrapper .summary-excerpt {
  flex: 1;
}
Generate this with our Section BuilderTry it free →

Related Questions

Layout

How do I change the section padding in Squarespace?

Layout

How do I make a section full width in Squarespace?

Layout

How do I hide a section on mobile in Squarespace?

Layout

How do I center content vertically in a Squarespace section?

A little over your head?

No shame — this stuff is hard. Let the pros handle it.

Long Drive MarketingTalk to Long Drive Marketing →