CSS网格元素在窗口调整大小上的位置

Question

我有4个div，在中尺寸的窗口上看起来像波纹管：

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

给出small设备上附带的代码段，以下内容发生定位：

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