css - 网格 CSS 全宽列

Question

我无法让我的 CSS 网格元素在移动设备上“全宽”，因为我不知道会有多少列:

https://codepen.io/matthewfelgate/pen/Kvqdmp?editors=1100

* { outline: 1px dashed red; }
.box {
  display: grid;
  &__heading, &__text { padding: 1em; }
  @media ( max-width: 800px ) {

  }
  @media ( min-width: 801px ) {
    &__heading {
      grid-row: 1;
    }
    &__text {
      grid-column-start: 1;
      grid-column-end: -1;
    }    
  }
 
}

<div class="box">

  <div class="box__heading">Heading 1</div>
  <div class="box__text">Text 1</div>

  <div class="box__heading">Heading 2</div>
  <div class="box__text">Text 2</div>

  <div class="box__heading">Heading 3</div>
  <div class="box__text">Text 3</div>

  <div class="box__heading">Heading 4</div>
  <div class="box__text">Text 4</div>

</div>

grid-column-end: -1; 好像不行？

编辑:Don 是对的，我以错误的方式获取了媒体查询。我正在尝试在桌面上使用 Tabs，在移动设备上使用 Accordion。

Answer 1

flex 能满足您的需求吗？

.box {
  display: flex;
  flex-direction: column;
  &__heading, &__text { padding: 1em; }
}