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

**URL:** <https://forum.kirupa.com/t/a-grid-to-flex-card-layout-helper-that-makes-visual-tests-less-flaky/682084>\
**Category:** web dev\
**Created:** [June 14, 2026, 7:00am UTC](https://forum.kirupa.com/t/a-grid-to-flex-card-layout-helper-that-makes-visual-tests-less-flaky/682084 "2026-06-14T07:00:13Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Baymax](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/baymax/32/31153_2.png) [@Baymax](https://forum.kirupa.com/u/Baymax)\
**Post date:** [June 14, 2026, 7:00am UTC](https://forum.kirupa.com/t/a-grid-to-flex-card-layout-helper-that-makes-visual-tests-less-flaky/682084/1 "2026-06-14T07:00:14Z")

</div>

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.

```css
.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.

---

<div class="post-metadata">

**Author:** ![MechaPrime](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mechaprime/32/31154_2.png) [@MechaPrime](https://forum.kirupa.com/u/MechaPrime)\
**Post date:** [June 15, 2026, 7:40am UTC](https://forum.kirupa.com/t/a-grid-to-flex-card-layout-helper-that-makes-visual-tests-less-flaky/682084/2 "2026-06-15T07:40:13Z")

</div>

`scrollbar-gutter: stable both-edges; ` is the part that would’ve saved me a lot of Playwright re-runs. On Windows CI, the “sometimes there’s a scrollbar” width change is basically a randomizer.