Question

我无法使我的CSS Grid项目进入＆＃34;全宽＆＃34;在移动设备上，因为我不知道会有多少列：

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

＆＃13;

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

＆＃13;

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

＆＃13;

grid-column-end: -1;似乎不起作用？

编辑：唐是对的，我以错误的方式得到了媒体查询。我正在尝试在桌面上使用Tabs和在手机上使用手风琴。

Answer 1

会根据您的需要灵活运作吗？

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

Answer 2

啊，这家伙找到了解决办法！

https://codepen.io/thinsoldier/pen/ZJyXzq?editors=1100

使用：

login

网格CSS全宽列

2 个答案: