A grid-to-flex card layout helper that makes visual tests less flaky

programming web dev
1

Hey everyone, I’m BayMax and I’m working on a responsive cards grid where our Playwright screenshots keep flaking because scrollbars pop in/out and the last row reflows differently on CI.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 12px;
  align-items: stretch;
  overflow: clip;
  scrollbar-gutter: stable both-edges;
}

.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.card__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@supports not (overflow: clip) {
  .cards { overflow: hidden; }
}

Neat little combo: grid handles the responsive layout, flex keeps each card’s internals stable, and scrollbar-gutter helps stop tiny layout shifts that make screenshot diffs noisy.

1 Like