把两家公司的官网截图并排摆着，一家说不出哪里不对但整体发飘，另一家怎么看怎么齐整，这种差别十有八九出在栅格和间距上。网页设计制作里，栅格是隐形的骨架，间距是呼吸的节奏，两者定好了，页面自然稳。
十二栏栅格是什么
主流做法是把页面内容区分成十二等份，模块宽度取整数份：新闻列表占八栏，侧边栏占四栏；三张卡片各占四栏，正好铺满一行。十二的好处是能被 2、3、4 整除，两栏三栏四栏布局都好排。栅格之外还要定内容区最大宽度，常见一千二百像素上下，屏幕再宽内容也不无限拉伸，否则二十七寸显示器上一行拖出半米长。设计稿阶段就把栅格画出来，前端按栅格写，这是页面齐整的技术底子。
间距只用那几档
齐整感的另一半来自间距纪律。成熟的做法是定一组基准值，比如 8、16、24、32、48、64，页面里所有留白都从这组数里取：模块间距 48，图片与标题间距 16，段落间距 24。听起来死板，做出来满页透着讲究。反例是间距全凭手感，20、22、26 混着来，肉眼看不出谁错，整页就是说不出的松散。手机端间距整体收一档，四十八的模块间距在手机上换成二十四到三十二。
对齐是最低成本的精致
网页设计制作的廉价感常常来自没对齐：卡片标题有的顶格有的缩进，图标和文字基线不齐，按钮组高低不一。对齐不需要任何天赋，只需要耐心——设计稿里对齐线拉好，前端用弹性布局对齐，验收时贴着屏幕边看边挑。给三条实用的自查线：左边缘是否一条直线、模块上下间距是否一致、同类元素的字号是否统一。这套自查不费时间，项目验收时照着走一遍，十分钟的事。
栅格在不同端怎么收放
栅格体系要能随屏幕收放。电脑端十二栏，到平板收缩成八栏或六栏的思路，卡片从四栏变两栏；手机端干脆放弃栅格，全部单栏堆叠，只保留间距节奏。常见错误是电脑端的八栏列表直接缩成手机上的窄条，字挤成一团。收放规则要在设计稿阶段画出来：哪个宽度栏数怎么变、哪块优先显示哪块收起。有这套规则在前，前端写起来快，日后改版的人也看得懂当初的意图。
两句实在建议：跟建站方确认设计稿时问一句“用的什么栅格和间距体系”，答不上来的多半靠手感拼版；自己排查老网站时，拿测量工具量一量左边缘，歪了的地方让开发统一，比格网络交付设计稿都会附栅格标注，这类问题在源头就摁住了。
