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

感谢您的回复，请问您的移动设备可以试用吗？问候。 –

我试过最小宽度和相同的结果。媒体查询是一个选项，但我认为这种行为在移动浏览器中是错误的，在两种情况下，我都应该以同样的方式做出回应。感谢致敬！ –

CSS网格包装行为

回答

相关问题