使用CSS Grid重构蒙德里安画作布局异常求助：行列数与排序疑问

一、布局无法正确对齐的核心问题 #

你的代码中grid-template-columns和grid-template-rows的轨道值使用了逗号分隔，这是CSS Grid语法的错误：

/* 错误写法（你的代码） */
grid-template-columns: 320px, 198px, 153px,50px;
grid-template-rows: 414px, 130px, 155px, 20px;

CSS Grid的轨道宽度/高度必须用空格分隔，逗号仅用于特殊场景（如重复轨道函数repeat()、命名轨道组）。这个错误会导致浏览器无法正确解析网格轨道，直接破坏整个布局结构。

修复后应改为：

/* 正确写法（参考方案） */
grid-template-columns: 320px 198px 153px 50px;
grid-template-rows: 414px 130px 155px 22px;

另外你最后一行的高度设为20px，参考方案是22px，这会导致底部区域高度匹配偏差，建议统一为22px以还原画作比例。

二、为何使用4列4行而非2列3行 #

选择4列4行是为了精准还原蒙德里安画作的细节分割：

• 画作中存在右侧50px的窄竖条、底部22px的窄横条这些细微结构，4列4行的轨道划分可以直接对应这些区域；
• 多轨道划分能让每个色块的定位更灵活，比如grid-area: 2 / 2 / 4 / 4这种跨多轨道的声明，依赖预先定义的细分轨道来实现精确的跨区域布局；
• 如果用2列3行，无法拆分出这些小细节，会丢失原作的比例和分割感，也难以用CSS Grid的属性实现色块的精准堆叠。

三、布局排序差异的原因 #

你看到的排序偏差本质还是轨道解析错误导致的元素自动布局混乱：
当网格轨道无法正确解析时，浏览器会默认使用自动轨道（auto），元素的排列顺序和位置会完全偏离预期。修复轨道的逗号问题后，元素会按照CSS Grid的自动流规则，结合你设置的grid-column/grid-row/grid-area属性，自动排列成老师要求的R,W,W,W,B,W,W,Bk结构。

另外可以检查你的色块元素顺序：参考方案中所有色块都统一使用.item类，你的代码用.child，这本身不影响布局，但要确保每个色块的定位属性（如grid-area、span）与参考方案一致。

内容的提问来源于stack exchange，提问作者Osamu Midoriya