CSS网格元素在调整窗口大小时的定位

我有4个div，它们在中等大小的窗口上显示如下：

给定附加的代码片段，在small设备上 定位发生在：

我希望的定位是：

我本以为会这样

  grid-template-areas:
      'top-left-container'
      'top-right-container'
      'bottom-left-container'
      'bottom-right-container';

可以实现这一点，但事实并非如此。 有什么想法为什么以及如何实现这一点吗？

@介质（最小宽度：768px）{
.集装箱{
显示：网格；
网格模板柱：1fr 1fr；
网格模板行：自动；
栅柱间隙：50px；
网格模板区域：
“左上角容器右上角容器”
‘左下集装箱右下集装箱’；
}
}
@介质（最大宽度：768px）{
.集装箱{
显示：网格；
网格模板列：自动；
网格模板行：自动；
网格模板区域：
“左上角容器”
“右上角容器”
“左下角容器”
“右下角容器”；
}
}
.左{
边框：3倍纯色灰色；
}
.对{
边框：3倍纯色灰色；
}
.左上角{
背景：黄色；
网格区域：左上角的容器；
高度：100px；
}
.右上角{
背景：黄色；
网格区域：右上角的容器；
高度：100px；
}
.左下角{
背景：红色；
网格区域：左下角的容器；
}
.右下角{
背景：红色；
网格区域：右下角的容器；
自我对齐：结束；
}

左上角
左下角
右上角
右下角

所以我不确定如何处理边框，但基本上你必须有一个平面结构，以便网格工作，并根据你的需要分别应用每一面边框

@介质（最小宽度：768px）{
.集装箱{
显示：网格；
网格模板柱：1fr 1fr；
网格模板行：自动；
栅柱间隙：50px；
网格模板区域：
“左上角容器右上角容器”
‘左下集装箱右下集装箱’；
}
.左上角{
边框顶部：3倍纯色灰色；
左边框：3倍纯色灰色；
右边框：3倍纯色灰色；
}
.右上角{
边框顶部：3倍纯色灰色；
左边框：3倍纯色灰色；
右边框：3倍纯色灰色；
}
.左下角{
边框底部：3倍纯色灰色；
左边框：3倍纯色灰色；
右边框：3倍纯色灰色；
}
.右下角{
边框底部：3倍纯色灰色；
左边框：3倍纯色灰色；
右边框：3倍纯色灰色；
}
}
@介质（最大宽度：768px）{
.集装箱{
显示：网格；
网格模板列：自动；
网格模板行：自动；
网格模板区域：
“左上角容器”
“右上角容器”
“左下角容器”
“右下角容器”；
}
.左上角{
边框顶部：3倍纯色灰色；
左边框：3倍纯色灰色；
右边框：3倍纯色灰色；
}
.右上角{
边框底部：3倍纯色灰色；
左边框：3倍纯色灰色；
右边框：3倍纯色灰色；
}
.左下角{
边框顶部：3倍纯色灰色；
左边框：3倍纯色灰色；
右边框：3倍纯色灰色；
}
.右下角{
边框底部：3倍纯色灰色；
左边框：3倍纯色灰色；
右边框：3倍纯色灰色；
}
}
.左{
边框：3倍纯色灰色；
}
.对{
边框：3倍纯色灰色；
}
.左上角{
背景：黄色；
网格区域：左上角的容器；
高度：100px；
}
.右上角{
背景：黄色；
网格区域：右上角的容器；
高度：100px；
}
.左下角{
背景：红色；
网格区域：左下角的容器；
}
.右下角{
背景：红色；
网格区域：右下角的容器；
自我对齐：结束；
}

左上角
左下角
右上角
右下角

我认为问题在于，您用另一个

div

来包装每一对元素。你需要确切的HTML结构吗？不一定

 -------------  
| top-left    |  
 -------------   
| bottom left |  
 -------------   
| top-right   |  
 -------------   
| bottom right|  
 -------------  

 -------------  
| top-left    |  
 -------------   
| top-right   |  
 -------------   
| bottom left |  
 -------------   
| bottom right|  
 -------------  

  grid-template-areas:
      'top-left-container'
      'top-right-container'
      'bottom-left-container'
      'bottom-right-container';