Html Css网格线布局

我正在尝试创建这个布局 我有这个aurelia模板 这就是CSS规则

#containerPlanner {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: repeat(4, 1fr);
}

#cabecera {
  display: flex;
  grid-column: 1/4;
  grid-row: 1;
  grid-area: cabecera;
}

#resumen {
 grid-column: 1;
 grid-row: 2;
 border: 2px solid black;
 background-color: aqua;
 grid-area: resumen;
}

#grafica {
 grid-column: 2/4;
 grid-row: 2;
 border: 2px solid black;
 background-color: yellow;
 grid-area: grafica;
}

#opciones {
 display: flex;
 grid-column: 1/4;
 grid-row: 3;
 grid-area: opciones;
}

#datos {
 grid-column: 1/4;
 grid-row: 4;
 grid-area: datos;
}

但结果是这样的

我不明白为什么resumen部分占据了整个屏幕的宽度，如果它有网格列：1

格拉菲卡节也是如此

有什么想法吗

---

注意，在HTML中有

。但是在CSS中有

#containerPlanner

。没有一个网格CSS正在应用。投票结束，因为这个问题是由一个无法再复制的问题或一个简单的印刷错误引起的。虽然类似的问题可能会在这里讨论，但这一问题的解决方式不太可能帮助未来的读者。对不起。谢谢，现在工作很好