CSS Расположение элементов сетки при изменении размера окна - PullRequest
Новая
       22

CSS Расположение элементов сетки при изменении размера окна

0 голосов
/ 12 марта 2020

У меня есть 4 делений, которые на средний размер windows выглядят так: 

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

1 Ответ

1 голос
/ 12 марта 2020

Так что я не уверен, что делать с границами, но в основном вы должны иметь плоскую структуру, чтобы сетка работала, и применять каждую границу отдельно, как вы хотите. 

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