无法理解CSS Grid布局思路，自定义Grid规则被浏览器划掉失效

问题原因 #

• 核心错误是grid-column-start、grid-column-end、grid-row-start、grid-row-end这类网格位置属性错误使用了fr单位。这类属性仅接受网格线编号、自定义网格线名称作为有效值，fr是仅用于grid-template-columns和grid-template-rows定义轨道大小时的比例单位，不可以用在位置属性上，所以浏览器识别为非法属性直接划掉失效。
• 其次你给父容器.ipad定义的grid-template-rows:3fr仅声明了1行网格轨道，后续子元素用到的第2、3行网格线不存在，也会导致布局异常。
• 额外提示：你给所有网格子元素设置了固定height:80px，会覆盖网格轨道的高度分配逻辑，如果需要自适应填充父容器高度可以删掉这个固定高度设置。

修正后的CSS代码 #

/* Main Container */
.ipad {
    width: 1024px;
    height: 1024px;
    background-color: antiquewhite;
    display: grid;
    /* 2列：宽度比例1:2 */
    grid-template-columns: 1fr 2fr;
    /* 2行：可根据实际布局需求调整比例，示例为上下均分 */
    grid-template-rows: 1fr 1fr;
}

/* Grid Layout */
.firstbox {
    background-color: blue;
    border-radius: 20px;
    margin: 10px;
    /* 占据第一列 */
    grid-column-start: 1;
    grid-column-end: 2;
    /* 跨全部2行 */
    grid-row-start: 1;
    grid-row-end: 3;
}

.topright {
    background-color: blueviolet;
    border-radius: 20px;
    margin: 10px;
    /* 占据第二列 */
    grid-column-start: 2;
    grid-column-end: 3;
    /* 占据第一行 */
    grid-row-start: 1;
    grid-row-end: 2;
}

.bottomright {
    background-color: cadetblue;
    border-radius: 20px;
    margin: 10px;
    /* 占据第二列 */
    grid-column-start: 2;
    grid-column-end: 3;
    /* 占据第二行 */
    grid-row-start: 2;
    grid-row-end: 3;
}

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