CSS Grid - Форматирование строк и столбцов для адаптивных экранов

Question

Ребята, я пытаюсь разработать макет ниже. Это возможно с сеткой CSS? Я добавляю все, что я пробовал, и все еще пытаюсь достичь желаемого результата с охватом строк и изменением порядка столбцов. любая помощь будет оценена.

Примечание. Я хочу, чтобы содержимое элемента охватывалось всеми строками во втором столбце. в основном он работает как вкладка на рабочем столе и как аккордеон на экране мобильного телефона.

.container {
  display: grid;
  grid-template-columns: 30% 70%;
}

.item {
  min-height: 50px;
  border: solid 1px #333;
}

<div class="container">
  <div class="item item-1">item-1</div>
  <div class="item item-2">item-2</div>
  <div class="item item-3">item-3</div>
  <div class="item item-4">item-4</div>
  <div class="item item-content-1">item-content-1</div>
  <div class="item item-content-2">item-content-2</div>
  <div class="item item-content-3">item-content-3</div>
  <div class="item item-content-4">item-content-4</div>
</div>

Answer 1

Да, это вполне возможно при использовании медиазапроса и потока столбцов.

.container {
  display: grid;
  grid-template-columns: 30% 70%;
  grid-auto-flow: column;
}

.item {
  min-height: 50px;
  border: solid 1px #333;
  grid-column: 1;
}

.item[class*="item-content-"] {
  grid-column: 2;
  background: lightblue;
}

@media screen and (max-width:700px) {
  .container {
    grid-template-columns: 1fr;
  }
  .item[class*="item-content-"] {
    grid-column: 1;
  }
  .item-2 {
    grid-row-start: 6;
  }
  .item-3 {
    grid-row-start: 7;
  }
  .item-4 {
    grid-row-start: 8;
  }
}

<div class="container">
  <div class="item item-1">item-1</div>
  <div class="item item-2">item-2</div>
  <div class="item item-3">item-3</div>
  <div class="item item-4">item-4</div>
  <div class="item item-content-1">item-content-1</div>
  <div class="item item-content-2">item-content-2</div>
  <div class="item item-content-3">item-content-3</div>
  <div class="item item-content-4">item-content-4</div>
</div>

За обновление (при условии, что существует только один .item-content div

.container {
  display: grid;
  grid-template-columns: 30% 70%;
  grid-auto-flow: column;
}

.item {
  min-height: 50px;
  border: solid 1px #333;
  grid-column: 1;
}

.item-content-1 {
  grid-column: 2;
  grid-row: 1 / span 4;
  background: lightblue;
}

@media screen and (max-width:700px) {
  .container {
    grid-template-columns: 1fr;
  }
  .item-content-1 {
    grid-column: 1;
    grid-row: 2;
  }
}

<div class="container">
  <div class="item item-1">item-1</div>
  <div class="item item-2">item-2</div>
  <div class="item item-3">item-3</div>
  <div class="item item-4">item-4</div>
  <div class="item item-content-1">item-content-1</div>
</div>

Answer 2

Пересмотренный ответ: Пересмотренная скрипка Я думаю, что это работает для вас.

HTML:

<div class="container">
 <div class="item item-1 order1">item-1</div>
 <div class="item item-2 order2">item-2</div>
 <div class="item item-3 order3">item-3</div>
 <div class="item item-4 order4">item-4</div>
 <div class="item item-content-1 order1 active">item-content-1</div>
 <div class="item item-content-2 order2 ">item-content-2</div>
 <div class="item item-content-3 order3">item-content-3</div>
 <div class="item item-content-4 order4">item-content-4</div>
</div>

CSS:

 html,
  body {
    height: 100%;
    padding: 0;
  }

  .container {
    display: grid;
    grid-template-columns: 30% auto;
    height: 100%;
  }

  .item {
    min-height: 50px;
    border: solid 1px #333;
  }

  .item[class*="item-content-"] {
    display: none;
    height: auto;
    background-color: gray;
    overflow: auto;
  }

  .item[class*="item-content-"].active {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 5;
    display: block;
  }

  @media (max-width:767px) {
    .order1 {
      order: 1;
    }
    .order2 {
      order: 2;
    }
    .order3 {
      order: 3;
    }
    .order4 {
      order: 4;
    }
    .container {
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: stretch;
    }
    .item[class*="item-content-"] {
      background-color: goldenrod;
    }
    .item {
      height: 50px;
    }
    .item[class*="item-content-"].active {
      display: flex;
      flex-grow: 1;
    }
  }

--------------------------------------------------------------------

Вы можете использовать свойство CSS order.попробуйте fiddle

Свойство order CSS устанавливает порядок размещения элемента в контейнере flex или grid.

<div class="container">
  <div class="item item-1 order1">item-1</div>
  <div class="item item-2 order2">item-2</div>
  <div class="item item-3 order3">item-3</div>
  <div class="item item-4 order4">item-4</div>
  <div class="item item-content-1 order1">item-content-1</div>
  <div class="item item-content-2 order2">item-content-2</div>
  <div class="item item-content-3 order3">item-content-3</div>
  <div class="item item-content-4 order4">item-content-4</div>
</div>

CSS:

.container {
  display: grid;
  grid-template-columns: 30% 70%;
}

.order1 {
  order: 1;
}

.order2 {
  order: 2;
}

.order3 {
  order: 3;
}

.order4 {
  order: 4;
}

.item {
  min-height: 50px;
  border: solid 1px #333;
}

@media (max-width:767px) {
  .container {
    grid-template-columns: 1fr;
  }
}