等宽网格网页
The Monospace Web，Oskar Wickström，2024 年
正在布展…
它是怎么做的
- 第 1 步以 1ch 和 1 行高（rem）作为全局网格单位。
- 第 2 步所有 margin/padding/border 都用这两个单位的整数倍。
- 第 3 步用 JS 微调图片和媒体高度，让它们落在行高倍数上。
- 第 4 步提供调试开关，叠加显示网格以检查对齐。
复刻配方
一段技术配方，可以直接交给 AI 编程助手，也可以自己照着写。想指定技术栈、位置和性能预算，就把它加入实现方案。
Pick a monospace font and set a custom property for line height in rem; define every spacing token as multiples of 1ch horizontally and of that line height vertically. Draw borders and tables with box-drawing characters or with borders whose thickness is compensated by negative margins so total height stays on-grid. Add a tiny script that rounds image heights up to the nearest line-height multiple. Include a toggleable background-image grid overlay made from repeating-linear-gradient for debugging.
