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 →
