如何在使用display：grid;时指定最大列数,当内容对于空间太宽(或小于最小大小)时,它会自动断开？没有媒体查询,有没有办法做到这一点？
#grid {
display: grid;
grid-template-columns: repeat(2,1fr);
grid-gap: 1em;
}
#grid > div {
background-color: #ccddaa;
}
<div id="grid"> <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div> <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div> <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div> <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div> <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div> <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div> <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div> <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div> <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div> </div>
解决方法
HTML或CSS都没有任何关于容器后代包装的概念.
实质上,浏览器在初始级联期间呈现文档.当孩子包裹时,它不会回流文件.
因此,要更改列数,您需要在行的某处设置宽度限制或使用媒体查询.
这是一个更深入的解释：Make container shrink-to-fit child elements as they wrap
如果您可以定义列宽,则网格布局的自动填充功能可以轻松进行包装.
在此示例中,列数完全基于屏幕的宽度：
#grid {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(100px,1fr)); /* see notes below */
grid-gap: 1em;
}
#grid > div {
background-color: #ccddaa;
}
<div id="grid"> <div>text</div> <div>text</div> <div>text</div> <div>text</div> <div>text</div> <div>text</div> <div>text</div> <div>text</div> <div>text</div> </div>
笔记：
auto-fill功能允许网格尽可能多地排列网格轨道(列或行)而不会溢出容器.这可以创建与flex布局的flex-wrap：wrap相似的行为.
minmax()功能允许您设置网格轨道的最小和最大尺寸范围.在上面的代码中,列轨道的宽度将至少为100px,并且最大可用空间.
fr单位代表可用空间的一小部分.它类似于flex布局中的flex-grow.
