本文深入探讨了CSS3 Grid Layout中的fr单位，详细解释了fr如何表示网格容器中可用空间的比例，并通过实例展示了fr在定义网格轨道时如何控制元素的宽度和比例。通过不同的fr值设置，演示了如何创建灵活的网格布局，包括列轨道和行轨道的调整，以及在轨道数量多于或少于元素时的效果。
让我们接着来看网格布局
fr单位
网格轨道可以使用 任何 长度单位进行定义。 网格还引入了一个另外一个长度单位来帮助我们创建灵活的网格轨道，那就是 fr 。fr 代表网格容器中可用空间的一等份，并且受其影响的网格轨道会随着可用空间的变化 增长 或者 收缩 。fr 的数量表示在行或列中 可容纳的网格轨道 的 数量 ，而 fr 值的大小则决定了 网格轨道所占的比例，如下的几个例子将详细解释 。
请看如下代码
<style>
.wrapper div {
border: 1px solid;
background-color: violet;
}
.wrapper {
display: grid;
border: 1px solid;
grid-template-columns: 1fr;/* 定义一个宽度为1fr的列轨道 */
}
</style>
<body>
<div class="wrapper">
<div>One</div>
<div>Two</div>
</div>
</body>
在上面的代码中，我创建了一个类名为 wrapper 的网格容器&
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
