CSS Grid 是目前前端开发中最流行的网页布局方法之一，不过在使用 CSS Grid 时，我们可能会遇到一个常见的误解：不要在 Grid 列和行之间使用单位。
这个误解的起源在于 Grid 中的单位值，例如 fr，它表示可用空间中的一定比例。由于 Grid 可以自由调整列和行之间的大小和位置，因此使用绝对单位值可能会导致意外的结果。
然而，实际上在 Grid 中使用单位是完全没问题的。只需要遵循一些最佳实践，就可以避免 Grid 单位带来的问题。
最佳实践
1. 推荐使用 fr 单位
在 Grid 中，我们推荐使用 fr 单位来定义列和行。fr 单位表示可用空间的一定比例，使用它可以让 Grid 更灵活地适应不同的屏幕大小和布局。举个例子，如果我们想让一个充满整个网页宽度的网格布局，我们可以这样写：
----- - -------- ----- ---------------------- --- --- ---- -
这个代码将网页宽度分成了三个相等的部分，每个部分使用 1fr 表示。这个布局不仅简单明了，还可以自适应屏幕大小的变化。
2. 不要使用绝对单位
虽然在 Grid 中使用单位完全没问题，但我们不推荐使用绝对单位，例如 px 或 em。这是因为绝对单位并不能适应不同的屏幕大小和布局，容易导致布局错乱或者出现水平滚动条。
如果您必须使用绝对单位，可以尝试使用较小的单位（例如 px），并将自动调整大小的布局元素设定为具有较小尺寸的网格单元格。
3. 不要使用 calc() 函数
类似地，我们也不推荐在 Grid 中使用 calc() 函数。虽然 calc() 可以在 Grid 中有所用处，但是它容易导致布局变得混乱和难以维护。
如果需要进行一些简单的计算，例如将网格单元格的长度设置为其父元素宽度的一半，可以使用 fr 单位和 minmax() 函数相结合：
----- - -------- ----- ---------------------- --------- ---- --------- ----- -
这个代码将网页宽度平均分成两个部分，并使用 minmax() 函数限制每个部分的最小值为 0，最大值为 1fr。这个解决方案可以适应不同的屏幕大小和布局，而不需要使用复杂的计算。
示例代码
下面是一个 Grid 布局的示例代码，它使用了 fr 单位和 minmax() 函数：
---- ------------- ---- ----------------------- ------- ---------- ---- ----------------- ------- ---------- ------
----- - -------- ----- ---------------------- --------- ---- --------- ----- --------- ----- - -------- - ----------------- -------- - ----- - ----------------- ----- -
这个代码将网页宽度分成了两个部分，左侧部分使用 1fr 表示可用空间的 1/3，右侧部分使用 2fr 表示可用空间的 2/3。网格单元格之间间距为 10 像素，左侧区域的背景颜色为灰色，右侧区域的背景颜色为浅灰色。
总结
在使用 CSS Grid 时，不要害怕使用单位。正确使用 fr 单位可以让 Grid 更加灵活和可读性高，而且可以避免出现布局错误。在必须使用绝对单位时，可以适当地做出调整，例如将网格单元格的大小设计为更小的值。同时，避免使用 calc() 函数可以让 Grid 布局变得更加简洁和易于维护。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66510739d3423812e4411a1a