グリッド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が正しく、間違った方法でメディアクエリを取得しました。私はモバイル上のデスクトップとアコーディオンでタブをしようとしています。

Answer 1

フレックスは必要に応じて使えますか？

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

Answer 2

ああ、この男は解決策を見つけました！

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

使用：

grid-template-columns: repeat(auto-fill,minmax(100px,auto));