题目重点：把四个等大正方形排成 2×2，使用 Grid 与 aspect-ratio，说明窄屏、间距和可访问性处理。
题意与假设
这道练习题保留了面经中值得训练的核心约束，并将需要澄清的条件单独列出。现场拿到变体时，先和面试官确认这些条件。
- 把“四方格”解释为四个等大的正方形，按 2 行×2 列排列；容器最大 400px，窄屏不超视口，间距 8px。这些数字不是原题要求。
- 训练格子内放文字 1–4，因此使用可见文本与语义 main；若真实题只是装饰图，应按用途选择 aria-hidden 或说明文本。
解题路线
- 结构只放四个 cell，布局交给父级 CSS Grid；`grid-template-columns:repeat(2,minmax(0,1fr))` 固定两列并允许内容收缩，`gap` 独立控制格间距离。
- 给 cell `aspect-ratio:1` 保持高宽相等；容器 `width:min(100%,400px)`，body padding 留出边距。`box-sizing:border-box` 防 border/padding 额外推大宽度。
- 若格内文案较长，需再决定截断、换行或最小可读尺寸；仅用固定高度很容易在不同宽度下失去正方形。视觉颜色须核对对比度，生产场景可以把 token、focus 样式和交互语义加上。
手动走一遍
桌面 1280px 视口下容器为 400px，两列各 196px（中间 8px），每格高也为 196px；320px 视口减两侧 24px padding 后容器为 272px，两列各 132px。四格仍按两列两行且不溢出。
HTML 参考实现
下面的代码按上文假设实现，适合本地运行并追加自己的测试用例。
代码区可横向滚动；使用键盘时，先聚焦代码区再按方向键查看。
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Four-square grid training example</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; padding: 24px; }
.grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
width: min(100%, 400px);
}
.cell {
aspect-ratio: 1;
display: grid;
place-items: center;
color: #fff;
background: #175cd3;
border-radius: 4px;
}
</style>
<main class="grid" aria-label="Four-square grid">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
</main>
</html>
复杂度
四格静态布局的 DOM 和样式量 O(1)；推广到 N 格时浏览器需布局 N 个元素，Grid 仍避免逐项手算坐标。此例不需 JavaScript。
易错点与追问
容易失分的边界
- 为每个格子手工设置绝对坐标，窄屏溢出。
- 设定 width/height 固定像素却称响应式。
- 用 50% 列宽又加 gap，导致总宽超过容器。
- 忘记视口 meta，移动端缩放后检查失真。
- 把色块当装饰时仍暴露无意义的数字给读屏器。
继续深挖
- 改为 N 个项目自动换行需要怎样的 grid-template-columns？
- 格内文案很长时如何保持正方形和可读性？
- 如果要求任意 viewport 下完整占屏，间距和容器宽度如何算？
