在开始讲解如何解决 Safari 中 CSS Grid 网格不对齐的问题前，我们先了解一下 CSS Grid 是什么。
CSS Grid
CSS Grid 是 CSS 的一个布局模块，用于创建网格布局。一个网格是由一些行和列组成的，网格中的元素可以跨越多个行和列。CSS Grid 能够易于处理，作为网格容器的元素，在它的子元素中分配格子就可以了。
我们来看下面的代码示例：
---- ----------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ------
--------------- - -------- ----- ---------------------- ---- ----- ------------------- ---- ----- - ---------- - ------- --- ----- ------ ----------- ------- -
这段代码会创建一个 2x2 的网格，每个格子的大小为 50x50，元素 1 占用第一个网格，元素 2 占用第二个网格，以此类推。这个布局看起来是这个样子的：
| 1 | 2 |
|---|---|
| 3 | 4 |
并且，CSS Grid 还支持不同大小的网格。
Safari 中的问题
然而，在 Safari 上使用 CSS Grid 的时候，可能会出现网格不对齐的问题。这个问题的原因是 Safari 计算网格的方式和其他浏览器不同。在 Safari 中，如果网格中的某些元素有不同的尺寸，或者是网格尺寸为百分比或者是 Auto，网格就不会对齐。
例如，在下面的代码示例中，框中的两个元素大小不同，如果我们用 Safari 打开这个页面，大号元素的右侧就比小号元素的右侧高出一点。
---- ----------------------- ---- ------------------------- ---- ---------------- -------------- ------
--------------- - -------- ----- ---------------------- ---- ----- ------------------- ---- ----- - ---------- - ------- --- ----- ------ ----------- ------- - ------ - --------- - - -- -
解决问题
那么，怎么样才能解决在 Safari 中使用 CSS Grid 出现网格不对齐的问题呢？解决这个问题需要以下两个步骤：
1. 避免使用百分比和 Auto
在 Safari 中，使用百分比和 Auto 设置网格尺寸都会导致网格不对齐。为了解决这个问题，我们需要使用像素或 REM 单位来定义网格尺寸。
--------------- - -------- ----- ---------------------- ----- ------ ------------------- ----- ------ -
2. 避免使用不同尺寸的元素
另一个导致 Safari 中 CSS Grid 网格不对齐问题的因素是不同尺寸的元素。因此，我们在定义网格元素的尺寸时，需要确保它们都具有相同的尺寸。
---------- - ------ ------ ------- ------ ------- --- ----- ------ ----------- ------- - ------ - ------ ------ ------- ------ --------- - - -- -
结论
这就是如何解决在 Safari 中使用 CSS Grid 出现网格不对齐的问题。我们需要避免使用百分比和 Auto 作为网格尺寸，同时也需要确保网格中的元素具有相同的尺寸，这样就可以在 Safari 中创建网格布局而不会出现问题了。
完整的示例代码可以参考下面的代码片段：
---- ----------------------- ---- ------------------------- ---- ---------------- -------------- ---- ------------------------- ------
--------------- - -------- ----- ---------------------- ----- ------ ------------------- ----- ------ - ---------- - ------ ------ ------- ------ ------- --- ----- ------ ----------- ------- - ------ - ------ ------ ------- ------ --------- - - -- -
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672af9cbddd3a70eb6d14707