引言
随着前端技术的不断发展，CSS Grid 确立了其在布局上的统治地位。不过，由于其新颖的特性和设计理念，使得在开发过程中很容易就会踩坑。本文将会介绍CSS Grid 的常见 Bug，帮助读者避免在使用 CSS Grid 过程中遇到的各种问题。
Bug 汇总
1. 意外的间距
在进行网格设计时，当某些格子没有被完全占用时，你可能会注意到边距并没能表现如你所愿。
-- -------------------- ---- -------
-------
----- -
-------- -----
--------- -----
------------------- ----- ------
---------------------- ----- ----- ------
-
----- ---------------- -
------------ ---- --
-
----- ---------------- -
--------- ---- --
-
--------
---- -------------
------------
------------
------------
------------
------------
------在以上代码中，我们会发现，元素之间会自动留出间隔，因此我们可以使用一些 HACK 代码来解决这个问题。
-- -------------------- ---- -------
-------
----- -
-------- -----
--------- -----
------------------- ----- ------
---------------------- ----- ----- ------
-
----- ---------------- -
------------ ---- --
------------ -----
------------- -----
-
----- ---------------- -
--------- ---- --
----------- -----
-------------- -----
-
--------
---- -------------
------------
------------
------------
------------
------------
------2. 实现等高布局
在进行等高布局时，你可能会注意到一些盒子的宽度不同，导致布局不够美观。
-- -------------------- ---- -------
-------
---------- -
-------- -----
---------------------- --------- -----
--------- -----
------------ --------
-
----- -
-------- -----
-
----- --- -
------ -----
------- -----
-
----- ------------ -
----- --
------------ -----
-
--------
---- ------------------
---- -------------
---- ------------------------------------
---- --------------------
---------------
------
------
---- -------------
---- ------------------------------------
---- --------------------
---------------
------
------
------在以上代码中，我们会发现元素之间的高度是不一样的，在 CSS Grid 中，你可以添加以下代码（所有包含在容器中的元素都继承了这个属性）来解决这个问题。
-- -------------------- ---- -------
-------
---------- -
-------- -----
---------------------- --------- -----
--------- -----
------------ --------
-
----- -
-------- -----
--------------- -------
-
----- --- -
------ -----
------- -----
----- - - -----
----------- ------
-
----- ------------ -
----- - - -----
----------- -----
-
--------
---- ------------------
---- -------------
---- ------------------------------------
---- --------------------
---------------
------
------
---- -------------
---- ------------------------------------
---- --------------------
---------------
------
------
------3. 悬浮触发子元素溢出父元素
在添加悬浮效果时，我们通常会设置一个容器为 relative，子元素为 absolute，当你 hover 容器时，你可能会发现子元素溢出了容器的范畴。
-- -------------------- ---- -------
-------
---------------- ----- -
-------- ------
-
---------- -
--------- ---------
-------- -----
---------------- -------
------------ -------
------ ------
------- ------
----------------- -----
--------- -------
-
----- -
--------- ---------
---- --
----- --
-------- -----
------ ------
------- -----
-----------
------------------ ------ -------------- -----------------
------------------ ------- -------------- -----------------
-
--------
---- ------------------
---- ------------------------------------
---- -------------------
------这个问题已经有人提出过，解决方法如下：
-- -------------------- ---- -------
-------
---------------- ----- -
-------- ------
-
---------- -
--------- ---------
-------- -----
---------------- -------
------------ -------
------ ------
------- ------
----------------- -----
--------- -------
-
----- -
--------- ---------
---- -----
----- -----
------ -----
------- -----
-------- -----
-----------
------------------ ------ -------------- -----------------
------------------ ------- -------------- -----------------
-------- ---
--------------- -----
-
--------
---- ------------------
---- ------------------------------------
---- -------------------
------总结
在本文中，我们介绍了 CSS Grid 的一些常见 Bug，以及如何解决这些问题，帮助读者充分了解 CSS Grid 的特性和如何避免遇到问题。在未来的开发过程中，期望读者能够更加熟练地运用 CSS Grid，在布局中用得更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648c540048841e9894aacdca