Web、UI与CSS
用 Flexbox 和 Grid 排列等间距卡片
使用工具
三张卡片可能最后一张掉行，或长 URL 撑宽容器。先别不断缩卡片宽度，应确认父容器的布局机制。Grid 适合明确行列关系，Flexbox 适合沿一个方向安排项目，可用预览逐项观察。
先做三列与 16px 间距
选择 Grid、三列、一行、间距 16、预览三项。repeat(3, minmax(0, 1fr)) 平分扣除间距后的空间。内部可用宽 960px 时，两个间距占 32px，剩 928px 分三列，不是先三等分百分比再加间距。
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;预览改五项时，第二行放两项；改两列则有三行。行数设置定义显式轨道，不是项目上限。不要只测试刚好三项，也看四、五项如何继续排列。
切换 Flexbox 后关注点不同
Flexbox 可试 row/column 方向及两轴对齐。输出含 flex-wrap:wrap，但不自动得到等宽三列，子项宽度与 flex-basis 会影响容纳数量。生成的是父容器配置，不是完整替换卡片样式。
space-between 分配剩余空间，末行仅两项时可能拉得很开。需要跨行列位置一致可考虑 Grid，工具栏自然宽度项目可试 Flexbox。按对齐关系而非技术新旧选择，能减少后来补例外。
短示例看不出长内容问题
等宽方块排好后，要放入长标题、不易断行 URL、图片和两行按钮。minmax(0, 1fr) 允许轨道缩小，但不是子内容自动换行的万能设置。应找出要求宽度的内容，再对该部分设置换行或内部滚动。
align-items:stretch 可对齐同行外框高度，但不自动对齐卡片内按钮。外框尺寸与内部排布是两层问题，先看父级行列，再调内部纵向和留白，不要用父级 gap 反复修子内容问题。
优先可读列数而非固定三列
有侧栏时，1440px 屏幕并不提供同样宽的卡片区。应测实际父容器，确认文字与控件容纳，窄时改两列或一列。工具不自动生成整套媒体查询，需将基础 CSS 接入站点宽度规则。
纵向排列往往比缩字和缩间距硬塞三列更好。检查约 320px、缩放和长翻译有无整页横溢出；代码或宽表应在自身区域处理。改列数不等于隐藏信息。
保持视觉与阅读顺序一致
row-reverse 或 column-reverse 改视觉布局，不一定改变文档顺序。要检查 Tab 与朗读是否和视觉一致。美观与易理解操作都重要，大幅 CSS 重排前先考虑源文档顺序。
依次试三项基础、五项换行、真实长文、窄宽列数，最后键盘操作。一次全改会失去因果。先做最小布局，再逐项加回真实条件，就能区分父宽、间距与子内容造成的问题。
从相同方块进一步测试不同内容
三列预览整齐后，在实际实现中测试长标题、大数值、多按钮。短编号方块看不到换行和高度差，外层对齐也不自动对齐卡内按钮。生成 CSS 是外部布局起点，不是完整卡片实现。
长 URL 或不换行代码可能撑破正确列宽。全隐藏 overflow 会丢必要内容，应让正文换行、代码表格使用有标签的内部滚动，并查页面整体横向溢出。短样例能放下不证明长用户内容也可以。
依次检查宽屏、侧栏后的实际空间、窄屏堆叠、文字放大和键盘顺序。CSS 视觉重排可能与 Tab 不同，要确认所有操作可达。间距、列数与阅读顺序互相关联，应回实际数据画面测试，不是贴完声明就结束。