01从内容需要的空间出发
响应式布局首先要回答：一张卡片至少需要多宽，文字才能读得舒服？与其为每一种屏幕宽度单独设计列数，可以先确定内容所需的最小空间，再让网格安排剩余宽度。
卡片内部也要保持一致的间距与层级。标题、摘要和文章信息承担不同任务，不需要通过过多装饰来区分。
02用自动轨道表达布局规则
下面的写法适用于现代浏览器：空间足够时显示多列，窄屏时允许卡片收缩到容器宽度。父容器仍应留出适当的两侧间距。
卡片本身设置 min-width: 0，可以减少内部较长内容对网格尺寸的干扰。代码区单独横向滚动，有助于避免整页被撑宽。
CSS
.cards {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: 1rem;
}
.card { min-width: 0; }
.card p { overflow-wrap: anywhere; }
.card pre { overflow-x: auto; }03用真实内容检查布局
测试时不要只放长度相近的占位文字。可以加入一个长标题、一段连续英文、一块代码和一条较长链接，检查是否会出现页面横向溢出。
同时检查触摸区域、键盘焦点和文字大小。布局没有溢出只是起点，阅读和操作都应在小屏幕上保持清楚。
进一步阅读
下列文档用于延伸阅读，文中示例是围绕具体问题编写的简化示例。