栅格覆层调试器：在开发中可视化所有断点的列边界

构建一个非侵入式的调试覆层，实时显示当前断点下的栅格列线与间距，并支持显示/隐藏。 · 难度：入门 · +10XP

栅格覆层调试器

前端对齐视差常因栅格系统肉眼难辨而导致偏差。本教程将用Bootstrap提供的CSS自定义属性（--bs-gutter-x等）以及JavaScript，绘制一个半透明的覆层网格。它会随视口宽度动态计算列数，并叠加在页面之上。你还会学到如何利用Bootstrap的breakpoint检测（通过window.matchMedia）自动更新覆层样式，且不影响页面交互（pointer-events: none）。

// 覆层核心CSS
.grid-overlay {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to right, rgba(0,0,255,0.1) 0px, 
    rgba(0,0,255,0.1) calc(var(--bs-gutter-x)/2), 
    transparent calc(var(--bs-gutter-x)/2), 
    transparent calc(100% / var(--grid-columns) - var(--bs-gutter-x)/2)
  );
}