電網CSS全寬列

-1

我無法讓我的CSS電網項目走「全寬」在移動，因爲我不知道有多少列將有：電網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;似乎不工作？

編輯：唐是對的，我得到了錯誤的方式媒體查詢。我正在嘗試在桌面和手機上使用手機制作標籤。

來源

2017-08-10 Matthew Felgate

'格列末尾：-1'僅適用於* *明確電網。換句話說，定義了列的數量。由於您使用的是*隱式*網格（容器自動添加列），因此負整數方法無效（[source]（https://stackoverflow.com/a/44053668/3597276））。 –

目前似乎還沒有很好的答案。一個[**類似的問題**]（https://stackoverflow.com/q/44052336/3597276）有一個接受的答案，建議設置一個列以跨越大量的列。在我看來，這是一個糟糕的解決方案，在某些瀏覽器中甚至可能無法使用（因爲它們實際上會渲染所有軌道）。但是基於上述觀點，有些人認爲它很有用。 –

這個例子非常令人困惑，因爲當頁面變小時，您會橫向添加* more *內容，您是否有向後的例子？我很困惑你想達到什麼目的。 – Don

將彈性工作滿足您的需求？

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

來源

2017-08-10 16:36:48

這個人找到了一個解決方案啊！

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

使用：

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

來源

2017-08-11 08:23:07

電網CSS全寬列

回答

相關問題