我想让下面的 html 在 n 个相等的列中显示,使用 css 网格的行元素是否有两个、三个或更多子元素 - Flexbox 使这很容易,但我无法使用 css 网格完成它 - 任何帮助受到赞赏。
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
常见的答案是repeat(3, 1fr)
不太正确。
这是因为1fr
是关于可用(!)空间的分配。一旦内容变得大于轨道大小,这种情况就会中断。默认情况下,它不会溢出并相应调整列宽。这就是为什么不是所有1fr
保证宽度相等。1fr
实际上只是一个简写minmax(auto, 1fr)
.
如果您确实需要将列作为exact您应该使用相同的宽度:
grid-template-columns: repeat(3, minmax(0, 1fr));
minmax(0, 1fr)
允许网格轨道小至0
但大至1fr
,创建保持相等的列。但是,请注意,如果内容大于列或无法换行,这将导致溢出。
Here is 一个例子这表明了差异。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)