在发布前审查这段生成的商品目录网格。
排列卡片时不得产生水平溢出，在所有宽度下保留源顺序与焦点顺序，并让标题收缩或换行，不添加无关动画。
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>
生成代码仅作示例，不代表任何特定模型