Review this generated catalog grid before release.
Lay out cards without horizontal overflow, preserve source and focus order at every width, and let titles shrink or wrap without unrelated animation.
HTML
<section class="catalog">
<article class="catalog-card">Starter</article>
<article class="catalog-card">Professional</article>
<article class="catalog-card">Enterprise</article>
</section>
<style>
.catalog {
display: grid;
grid-template-columns: repeat(3, 33.333%);
gap: 24px;
grid-auto-flow: row dense;
}
.catalog-card {
min-width: 280px;
transition: all 300ms;
}
.catalog-card:first-child {
grid-column: 3;
}
@media (max-width: 40rem) {
.catalog { grid-template-columns: 1fr; }
.catalog-card:first-child { grid-column: 2; }
}
</style>
generated code is illustrative, not from any one model