浏览器显示CSS Grid轨道尺寸不符，求解答误解之处

你误解的核心在于混淆了CSS Grid轨道的单个尺寸和网格容器总宽度的概念，同时可能看错了开发者工具的标注对象：

• 你设置的grid-template-columns: 400px 300px 200px是定义了3个独立的列轨道，每个轨道的宽度分别为400px、300px、200px，网格容器总宽度确实是900px，但这是三个列轨道的宽度总和，不是单个轨道的宽度。
• 开发者工具中显示的150px.100px，其中150px是第一行轨道的高度（对应你设置的grid-template-rows: 150px ...），而.100px并不是列轨道的宽度——这大概率是你选中了内部的.item元素（你给所有item设置了width:100px），而非网格轨道本身。如果直接hover到网格的列轨道线条上，会看到对应的400px、300px或200px标注。
• 另外，你的.item1和.item5设置了grid-row: 1/3，会跨两行显示，但这只会影响行轨道的占用，不会改变列轨道的宽度设置。

你可以在开发者工具中直接点击网格容器的轨道线条（而非内部元素），就能看到正确的轨道尺寸标注。

内容的提问来源于stack exchange，提问作者Warlock Gaming