CSS Grid - 为响应式屏幕格式化行和列

Question

伙计们，我正在尝试开发以下布局。 css网格有可能吗？我正在添加我尝试过的任何内容，并且仍在尝试通过跨越行和更改列的顺序来达到预期的结果。任何帮助将不胜感激。

注意：我希望 item-content 跨越第二列中的所有行。基本上它在桌面上用作标签，在移动屏幕上用作手风琴。

.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

修改后的答案：Revised fiddle 我认为它对你有用。

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

The order CSS property sets the order to lay out an item in a flex or grid container.

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

Answer 2

是的，这完全可以使用媒体查询和列流实现。

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