CSS Grid布局未按预期生成两列 所有内容仅靠左列展示如何解决

核心问题原因 #

Grid布局的定位属性（grid-column/grid-row）仅对Grid容器的直接子元素生效，你当前的结构里，#imgres、#txtres、#mapouter都被包裹在.indautxu.zona这个div内部，而只有#selecto和.indautxu.zona是#cuerpores这个Grid容器的直接子元素，所以你给内部元素写的Grid定位规则全部不生效，所有内容都跟着.indautxu.zona默认排在第一列。
另外还有几个小的语法错误也会影响渲染：

• 外层<div id="cuerpores"标签漏写了闭合的>
• #imgres的max-width、#selecto和#opcionesselectas的font-size都缺少单位px

修正方案 #

1. 先修正HTML的标签错误，把<div id="cuerpores"改成<div id="cuerpores">
2. 给所有区域公共的.zona类新增Grid布局规则，让每个区域内部也走两列布局，CSS新增以下代码：

.zona {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column: 1 / 3;
  gap: 50px;
}

3. 调整内部元素的Grid行号，因为现在行号是相对于.zona容器的：

#imgres {
  /* 原有属性不变，仅修改grid-row */
  grid-row: 1;
}
#txtres {
  /* 原有属性不变，仅修改grid-row */
  grid-row: 1;
}
#mapouter {
  /* 原有属性不变，仅修改grid-row */
  grid-row: 2;
}

4. 补全缺失的CSS单位：

#imgres {
  max-width: 500px;
}
#selecto {
  font-size: 22px;
}
#opcionesselectas {
  font-size: 22px;
}

修改后即可实现预期效果：下拉选择器跨两列固定在顶部通栏，图片在左列，文本与地图在右列。

内容的提问来源于stack exchange，提问作者Eva del Hoyo Ortiz de Zárate