CSS Grid 是二维布局系统（行+列同时控制），适合页面整体布局、卡片网格等。Flexbox 是一维布局系统（主轴方向），适合组件内部排列、导航栏、居中元素等。

简单判断：需要同时控制行和列→用Grid；只需沿一个方向排列→用Flexbox。两者可以嵌套使用，Grid容器内可以使用Flexbox子元素。

fr（fraction，分数单位）代表网格容器中可用空间的一份比例。例如 grid-template-columns: 1fr 2fr 1fr 表示将可用空间分为4份，三列分别占1份、2份、1份。

计算公式：可用空间 = 容器宽度 - 所有固定列宽 - 所有gap，然后按fr比例分配。如果混合使用 200px 1fr 2fr，先减去200px和gap，剩余空间按1:2分配。

Chrome/Edge DevTools：在Elements面板中，Grid容器元素旁边会显示grid标签，点击可切换网格线叠加。在Layout面板中可以查看所有Grid容器并批量开关叠加显示。Firefox的Grid Inspector功能更强大，可以显示行号、区域名称和网格线详细位置。

本工具模拟了DevTools的网格线叠加功能，帮助你在开发前预览和调整Grid参数。

当子元素数量超过显式定义的网格单元格时，浏览器会自动创建新的行（隐式行）。使用 grid-auto-rows 可以控制隐式行的高度，例如 grid-auto-rows: minmax(100px, auto)。

类似地，grid-auto-columns 控制隐式列，grid-auto-flow 控制自动放置方向（row/column/dense）。

网格线编号从1开始（不是0）。例如4列网格有5条列线，编号1到5。使用 grid-column: 1 / -1 可以跨越整行，-1 表示最后一条线。

负值索引从网格末尾开始计数：-1是最后一条线，-2是倒数第二条线。这使得跨列/跨行操作非常灵活。