CSS網格包裝行爲

我是新的網格佈局，我正在嘗試使用它的自動包裝設計。CSS網格包裝行爲

我的代碼如下：

#grid { 
 
    display: grid; 
 
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); 
 
    grid-template-rows: 200px 200px 200px 200px; 
 
    grid-gap: 10px; 
 
} 
 

 
#grid > div { 
 
    background-color: #ccddaa; 
 
    min-width: 310px; 
 
}

<div id="grid"> 
 
    <div>text</div> 
 
    <div>text</div> 
 
    <div>text</div> 
 
    <div>text</div> 
 
</div>

Codepen例如：https://codepen.io/arielcessario/pen/GvdwLJ

我注意到的事情是，當我調整鍍鉻/歌劇窗口（不是在開發模式，而不是移動仿真），結果如下：

正如你所看到的，所有的都按照預期堆疊。

但是，當我試圖模仿移動設備，或者嘗試在移動瀏覽器，這是我得到：

這是該項目的移動截圖：

它從不堆疊，不管寬度如何。

注：

當我在移動視圖檢查，任何框的寬度不會比379px越小，網格的整個寬度是從不小於768px。
如果我使用固定的max-with種類的作品，但百分比沒有。
在Firefox模擬器上工作正常，但在Firefox手機瀏覽器上沒有。
正如Michael_B指出的那樣，筆在手機上運行良好，問題出在真實的項目上，如果你在鉻上模擬。

我想我失去了一些東西，但我找不到它。提前致謝。

來源

2017-08-22 KN_

我相信這是由Codepen增加了一些媒體查詢。你有沒有嘗試過你的佈局？ – vals

我在當地環境中嘗試過。空項目，沒有引導，只是代碼，但每次都有相同的結果。我們也和幾個朋友一起嘗試了這個，他們也有同樣的問題。感謝致敬！ –

我無法在手機上覆制問題。

但是，如果我們的目標是爲小屏幕一列，試試這個：

添加min-width: 0到您的網格項目（explanation）。

使用媒體查詢，調整容器是這樣的：

@media (max-width: 500px) { 
    #grid { 
     grid-template-columns: 1fr; 
    } 
}

來源

2017-08-22 18:49:02

感謝您的回覆，請問您的移動設備可以試用嗎？問候。 –

我試過最小寬度和相同的結果。媒體查詢是一個選項，但我認爲這種行爲在移動瀏覽器中是錯誤的，在兩種情況下，我都應該以同樣的方式做出迴應。感謝致敬！ –

@KN_您是否使用舊的移動設備？您的瀏覽器可能不支持css網格。 – wuppie367

CSS網格包裝行爲

回答

相關問題