CSS Grid 是一种非常强大的布局工具，它可以让我们更加灵活地控制网页布局。在 CSS Grid 中，我们通常使用网格单位来设置格子大小、列宽、行高等属性。在本文中，我们将深入讨论 CSS Grid 的尺寸单位，包括 fr、px、auto、minmax 和 repeat 等，并分享一些使用技巧。
fr
fr 是表示比例的单位，它指定了网格容器中剩余空间的分配比例。例如，如果一个网格容器有两个列，我们可以使用 1fr 和 2fr 来指定它们的宽度比例，如下所示：
.grid {
display: grid;
grid-template-columns: 1fr 2fr;
}这样，第一个列会占据 1/3 的空间，第二个列会占据 2/3 的空间。
我们还可以将 fr 和 px 单位混合使用。例如，下面的示例中，我们使用 150px 和 1fr 来设置列的宽度：
.grid {
display: grid;
grid-template-columns: 150px 1fr;
}px
px 是绝对长度单位，它指定了元素的实际大小。虽然 px 单位不像相对单位那样具有弹性，但在某些情况下它确实非常有用。例如，如果我们想要一个固定大小的元素，如下所示：
.box {
width: 200px;
height: 200px;
}auto
auto 表示自适应大小，它通常用于让元素根据其内容自动变化大小。在 CSS Grid 中，我们可以使用 auto 来让网格容器自适应元素的大小，如下所示：
.grid {
display: grid;
grid-template-columns: auto auto;
}这样，网格容器将根据其子元素的大小自适应。
minmax
minmax 是一个很有用的函数，它指定了一个范围，允许我们为元素设置一个最小值和最大值。在 CSS Grid 中，我们可以使用 minmax 来设置列或行的大小，如下所示：
.grid {
display: grid;
grid-template-columns: minmax(100px, 1fr) minmax(200px, 2fr);
}这个示例中，第一个列的宽度至少是 100px，但最多可以占据网格容器的剩余空间。第二个列的宽度至少是 200px，但最多可以占据网格容器宽度的一半。
repeat
repeat 是一个可以重复使用的函数，它可以帮助我们更方便地设置重复的网格行或网格列。例如，如果我们想要一个网格容器中有四个宽度为 100px 的列，我们可以这样设置：
.grid {
display: grid;
grid-template-columns: repeat(4, 100px);
}这个示例中，我们使用了 repeat 函数，将宽度为 100px 的列重复使用了 4 次。
总结
在 CSS Grid 中，我们有许多不同的尺寸单位可供使用。每个单位都有其自己的特点和使用场景。了解这些尺寸单位，以及如何将它们结合使用，将有助于我们更好地控制网页布局。把握好这些细节，也能让我们写出更优秀的前端代码。
参考示例代码：
<div class="grid"> <div class="box">Lorem ipsum dolor</div> <div class="box">Sit amet, consectetur</div> <div class="box">Adipiscing elit</div> <div class="box">Sed do eiusmod tempor</div> </div>
-- -------------------- ---- ------- ---- - ----------- ----- -------- ---- - ----- - -------- ----- ---------------------- --- ---- --------- ----- -------- ----- ----------- ----- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646f31f1968c7c53b0d97a52