CSS 网格元素定位 Window 调整大小

Question

I have 4 divs, which on medium size windows look as bellow:

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

Given the code snippet attached, on small devices, the following positioning occurs:

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

My desired positioning is:

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

CSS 网格元素定位 Window 调整大小

CSS Grid Elements Positioning on Window Resize

css

css-grid

responsive