CSS Grid 是一种强大和灵活的布局方案，可以帮助我们更好地组织和排列网页中的内容。其中，fr 单位是 CSS Grid 中的一个重要单位，用于自动调整大小和分配空间。本文将详细介绍 fr 单位的用法和指导意义，并给出示例代码以便学习和实践。
什么是 fr 单位？
fr 单位是 CSS Grid 中的一种单位，表示剩余空间的比例。它背后的原理很简单：如果一个网格容器被分成了若干列或行，其中一些列或行的大小已经确定，那么剩余空间的全部或一部分可以由 fr 单位来分配。例如，下面的网格容器包含三列，前两列的宽度已经确定为 100px 和 200px，第三列则使用 fr 单位，表示占据剩余宽度的所有空间。
.grid {
display: grid;
grid-template-columns: 100px 200px 1fr;
}在上面的例子中，第三列的列宽将自动适应剩余空间。如果网格容器的宽度为 800px，则第三列的宽度为 500px（即剩余空间的比例为 1:2），而如果网格容器的宽度为 1000px，则第三列的宽度为 600px（即剩余空间的比例为 1:3）。通过使用 fr 单位，我们可以轻松地实现自适应和响应式布局，无需手动调整每个元素的大小或位置。
如何使用 fr 单位？
要使用 fr 单位，首先需要将网格容器的列或行定义为 grid-template-columns 或 grid-template-rows 属性。这些属性使用空格或斜杠将列或行的大小分隔开，例如：
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 50px 1fr 2fr;
}在上面的例子中，网格容器被分成了三列和三行，第一行的高度为 50px，后面的两行和三列分别使用 1fr 和 2fr 来分配剩余的空间。根据分配的比例，第一列和第三列的宽度将分别占据网格容器可用宽度的 1/4，而第二列的宽度将占据网格容器可用宽度的 1/2。
在实际开发中，我们可以结合其他 CSS 属性和选择器来更好地控制网格容器和内部元素的布局。例如，我们可以使用 grid-gap 属性来设置网格容器中元素之间的间距，使用 grid-column 和 grid-row 属性来指定元素所占据的列和行，以及使用 justify-content 和 align-items 属性来控制网格容器中所有元素的水平和垂直对齐方式。
总结
fr 单位是 CSS Grid 中非常强大和灵活的一种单位，可以帮助我们更好地实现自适应和响应式布局。通过使用 fr 单位，我们可以轻松地调整每个列或行的大小，同时保持网格容器内元素的对齐和排列。希望本文能够帮助读者更好地掌握 CSS Grid，实现更好的网页布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654c452c7d4982a6eb5db202