Сетка с двумя столбцами должна быть обернута в сетку с одним столбцом - PullRequest
Новая
       5

Сетка с двумя столбцами должна быть обернута в сетку с одним столбцом

2 голосов
/ 21 января 2020

В моей сетке css у меня есть один большой элемент в левом столбце и три меньших элемента в правом столбце: 

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: repeat(3, 50px);
  grid-auto-flow: column;
}

.item-1 {
  background-color: black;
  grid-column: span 1;
  grid-row: span 3;
}

.item-2,
.item-3,
.item-4 {
  grid-column: span 1;
  grid-row: span 1;
}

.item-2 {
  background-color: deeppink;
}

.item-3 {
  background-color: yellow;
}

.item-4 {
  background-color: blue;
}
<div class="container">
  <div class="item-1"></div>
  <div class="item-2"></div>
  <div class="item-3"></div>
  <div class="item-4"></div>
</div>

Теперь на меньших экранах три элемента справа просто исчезают, и виден только черный. Это потому, что я объявил ровно 3 строки в grid-template-rows: repeat(3, 200px);, верно?

Однако я хочу, чтобы все 4 элемента были обернуты друг в друга (например, сетка должна иметь 1 столбец и 6 строк):

Desired result

Я знаю, что это может быть достигнуто с помощью медиа-запросов, но я хотел бы избежать тех в этом сценарии, если это возможно.

Я пытался grid-template-rows: repeat(auto-fit, 200px), но это не дал желаемого результата.

Спасибо за помощь!

1 Ответ

0 голосов
/ 21 января 2020

вы можете попробовать 

.container {
    display: grid;
    grid-template-areas: 'a a';
    grid-template-columns: 50% 50%;
    grid-template-rows: repeat(3, 50px);
    grid-auto-flow: column; 
}

3 черных линии - 3 цветных линии 

@media only screen and (max-width: 600px) {
   .container {
     grid-template-areas: 'a';
     grid-template-columns: 100%;
     grid-template-rows: repeat(6, 50px);
   }
}

1 черная линия и 3 цветных линии 

@media only screen and (max-width: 600px) {
   .container {
     grid-template-areas: 'a';
     grid-template-columns: 100%;
     grid-template-rows: repeat(4, 50px);
   }

  .item-1 {
    grid-row: span 1;
  }
}

Вы можете установить ширина для медиа-запроса, как вы хотите.

...