为什么设置grid-row-end后网格项未跨两行？如何实现跨前两行全宽？

• grid-area的语法为grid-area: 行起始线 / 列起始线 / 行结束线 / 列结束线，网格线从1开始计数，两列/两行的布局对应3根列线/行线，你写的grid-area: 1 / 1 / 3 / 3语法本身没有问题，确实表示横跨2列、跨2行。
• 你观察到的“未生效”属于视觉错觉：你的网格容器没有显式定义行高，行高默认值为auto，会根据单元格内容自适应。item1的内容只有单个字符，它占据的两行总高度和其他单行内容的高度差异极小，同时它占满了前两行的所有列空间，剩余的2、3、4元素会自动排布到第三行及之后，视觉上很容易误判为item1只占了1行。
• 当你把grid-column-end设为2时，item1仅占据第一列的前两行，第二列的前两行可容纳2、3元素，两行高度被内容撑开，跨行效果就会直观显示出来。

根据你的实际需求选择对应修改方式：

需求1：item1确实需要占满前两行的全部两列 #

给网格容器显式设置行高即可直观看到效果，修改.grid-container样式：

.grid-container {
    display: grid;
    grid-template-columns: auto auto;
    /* 显式设置前两行高度，也可使用grid-auto-rows设置所有行的默认高度 */
    grid-template-rows: 50px 50px;
    padding: 10px;
}

修改后item1高度为100px，占满前两行两列，2、3元素会排布到第三行。

需求2：item1仅占第一行全部两列，剩余元素从第二行开始排布 #

修改.item1的grid-area属性，将行结束线改为2即可：

.item1 {
    grid-area: 1 / 1 / 2 / 3;
}

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