CSS Grid Layout兼容IE10+问题：左侧列无法铺满双右侧列高度

嘿，我看到你在做兼容IE10+的Grid布局时，遇到了左侧列没法拉伸至右侧两列总高度的问题，咱们来搞定它！

问题根源分析 #

IE10所支持的-ms-grid是CSS Grid的早期实验性实现，语法和现代标准Grid有不少差异。你之前的左侧列设置里，-ms-grid-row: 2是让元素从第二行开始布局，再加上-ms-grid-row-span: 2，但你的容器只定义了两行，这就导致IE10下左侧列的起始位置不对，没法铺满整个高度。

修正后的代码 #

只需要调整左侧列的Grid行定位属性即可，HTML部分无需改动：

CSS代码

img { 
  display: block; 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}
#page { 
  display: -ms-grid; 
  display: grid; 
  width: 100%; 
  height: 400px; 
  -ms-grid-rows: 50% 50%; 
  grid-template-rows: 50% 50%; 
  -ms-grid-columns: 60% 40%; 
  grid-template-columns: 60% 40%; 
}
#page #left { 
  -ms-grid-column: 1; 
  grid-column: 1; 
  /* 适配IE10：从第1行开始，跨2行 */
  -ms-grid-row: 1; 
  -ms-grid-row-span: 2; 
  /* 现代Grid写法：覆盖第1到第3条网格线，即两行高度 */
  grid-row: 1 / 3; 
  background-color: #ffa08c; 
  margin-right: 5px; 
}
#page #righttop { 
  -ms-grid-column: 2; 
  grid-column: 2; 
  -ms-grid-row: 1; 
  grid-row: 1; 
  background-color: #ffff64; 
  margin-left: 5px; 
  margin-bottom: 5px; 
}
#page #rightbottom { 
  -ms-grid-column: 2; 
  grid-column: 2; 
  -ms-grid-row: 2; 
  grid-row: 2; 
  background-color: #8cffa0; 
  margin-left: 5px; 
  margin-top: 5px; 
}

关键修正点说明 #

1. IE10适配：将-ms-grid-row从2改为1，让左侧列从第一行开始布局，配合-ms-grid-row-span: 2，就能跨越两行，铺满容器的整个高度。
2. 现代Grid优化：把grid-row: 2/4改为grid-row: 1 / 3，因为你的容器只定义了两行网格，从第1条网格线到第3条网格线正好覆盖两行的范围，语法更清晰准确。

这样调整后，不管是IE10+还是现代浏览器，左侧列都能完美拉伸至右侧两列的总高度啦！

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