CSS网格元素在窗口调整上的定位

Question

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

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

给定所附的代码片段，在小型设备上定位发生：

-------------  
| 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';

可以实现这一点，但事实并非如此。有什么想法可以实现这一点的原因和方法吗

@media (min-width: 768px) {
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
grid-column-gap: 50px;
grid-template-areas:
'top-left-container top-right-container'
'bottom-left-container bottom-right-container';
}
}
@media (max-width: 768px) {
.container {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas:
'top-left-container'
'top-right-container'
'bottom-left-container'
'bottom-right-container';
}
}
.left {
border: 3px solid gray;
}
.right {
border: 3px solid gray;
}
.top-left {
background: yellow;
grid-area: top-left-container;
height: 100px;
}
.top-right {
background: yellow;
grid-area: top-right-container;
height: 100px;
}
.bottom-left {
background: red;
grid-area: bottom-left-container;
}
.bottom-right {
background: red;
grid-area: bottom-right-container;
align-self: end;
}

<div class="container">
<div class="left">
<div class="top-left">
Top left
</div>
<div class="bottom-left">
Bottom left
</div>
</div>
<div class="right">
<div class="top-right">
Top right
</div>
<div class="bottom-right">
Bottom right
</div>
</div>
</div>

Answer 1

所以我不确定该如何处理边界，但基本上你必须使结构平坦，网格才能工作，并根据你的意愿单独应用每个边界边。

@media (min-width: 768px) {
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
grid-column-gap: 50px;
grid-template-areas:
'top-left-container top-right-container'
'bottom-left-container bottom-right-container';
}

.top-left {
border-top: 3px solid gray;
border-left: 3px solid gray;
border-right: 3px solid gray;
}
.top-right {
border-top: 3px solid gray;
border-left: 3px solid gray;
border-right: 3px solid gray;
}
.bottom-left {
border-bottom: 3px solid gray;
border-left: 3px solid gray;
border-right: 3px solid gray;
}
.bottom-right {
border-bottom: 3px solid gray;
border-left: 3px solid gray;
border-right: 3px solid gray;
}
}
@media (max-width: 768px) {
.container {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas:
'top-left-container'
'top-right-container'
'bottom-left-container'
'bottom-right-container';
}

.top-left {
border-top: 3px solid gray;
border-left: 3px solid gray;
border-right: 3px solid gray;
}
.top-right {
border-bottom: 3px solid gray;
border-left: 3px solid gray;
border-right: 3px solid gray;
}
.bottom-left {
border-top: 3px solid gray;
border-left: 3px solid gray;
border-right: 3px solid gray;
}
.bottom-right {
border-bottom: 3px solid gray;
border-left: 3px solid gray;
border-right: 3px solid gray;
}
}
.left {
border: 3px solid gray;
}
.right {
border: 3px solid gray;
}
.top-left {
background: yellow;
grid-area: top-left-container;
height: 100px;
}
.top-right {
background: yellow;
grid-area: top-right-container;
height: 100px;
}
.bottom-left {
background: red;
grid-area: bottom-left-container;
}
.bottom-right {
background: red;
grid-area: bottom-right-container;
align-self: end;
}

<div class="container">
<div class="top-left">
Top left
</div>
<div class="bottom-left">
Bottom left
</div>
<div class="top-right">
Top right
</div>
<div class="bottom-right">
Bottom right
</div>
</div>