前言
CSS Grid 布局是一种强大的前端布局方式，它提供了很多灵活的方法来布置元素。在 CSS Grid 中，我们可以使用百分比和 fr （fractional unit）单位来定义行和列的大小。虽然这两种方式很常见，但在实际的开发中，我们往往会遇到一些问题。因此，在这篇文章中，我们将详细讨论这些单位的使用方法，并提供一些实用的示例代码。
百分比单位
在 CSS Grid 中，我们可以使用百分比单位来定义网格的行和列大小。对于网格中的每一行和每一列，我们都可以使用百分比来指定它的大小。例如，如果我们希望一个网格有两行，每一行占网格的 $50%$，我们可以这样写：
.grid {
display: grid;
grid-template-rows: 50% 50%;
grid-template-columns: auto;
}在这个示例中，我们使用 grid-template-rows 属性来定义每一行的大小，使用 grid-template-columns 属性来定义每一列的大小。其中，我们使用了百分比单位来指定每一行占网格的比例，而将 grid-template-columns 属性的值设置为 auto ，则表示每一列的大小由网格中的元素自动决定。
这种方式的优点是可以很大程度上适应不同的布局要求，但是它也存在一些缺点。例如，在某些情况下，相邻的元素之间可能存在一些间距，这可能影响到布局的整体效果。
fr 单位
fr 是 CSS Grid 中一种很有用的单位，它表示网格中剩余空间的分数。在使用 fr 单位时，我们需要将网格的剩余空间平均分配给每一行和每一列。例如，如果我们希望一个网格有两行，每一行占网格的 $1\text{fr}$，我们可以这样写：
.grid {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: auto;
}在这个示例中，我们使用 grid-template-rows 属性来定义每一行的大小，使用 grid-template-columns 属性来定义每一列的大小。其中，我们使用了 fr 单位来指定每一行占网格空间的比例，而将 grid-template-columns 属性的值设置为 auto ，则表示每一列的大小由网格中的元素自动决定。
使用 fr 单位的好处是可以很方便地实现自适应的布局方案，不过需要注意的是，在使用 fr 单位时，我们需要保证网格中所有的行和列都使用了 fr 单位。如果只有部分行或列使用了 fr 单位，可能会导致网格中元素布局不均衡或者出现过多的空白。
结论
CSS Grid 布局中的百分比和 fr 单位是两种常见的尺寸单位，它们在不同的布局场景中都有各自的优势和限制。在实际的开发中，我们需要仔细分析布局的要求，并选择合适的单位来完成布局。同时，我们也可以结合这两种单位来实现更加灵活的布局。
示例代码
- 百分比单位示例：
-- -------------------- ---- ------- ----- - -------- ----- ------------------- --- ---- ---------------------- ----- - ----- - - - ----------------- ----- ------- --- ----- ----- -------- ----- -
<div class="grid"> <div>1</div> <div>2</div> </div>
- fr 单位示例：
-- -------------------- ---- ------- ----- - -------- ----- ------------------- --- ---- ---------------------- --- --- ---- - ----- - - - ----------------- ----- ------- --- ----- ----- -------- ----- -
<div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6771f1906d66e0f9aad31189