在前端开发中，常常需要实现居中、自适应宽度、紧贴底部等布局效果。而使用 CSS Grid 布局可以轻松实现这些效果，且兼容性良好，是一种值得学习和掌握的技术。
什么是 CSS Grid 布局？
CSS Grid 布局是一种二维网格布局系统，可以将页面分成行和列，然后在这个网格中放置元素。它可以轻松地控制元素的位置、大小和排列方式，是一种灵活且强大的布局方式。
居中实现
水平居中
要实现水平居中，只需将要居中的元素放在一个容器中，然后设置该容器的 display 属性为 grid，再将容器中的元素的 grid-column 属性设置为 2 / 3。如下所示：
---------- - -------- ----- ---------------- ------- - ------- - ------------ - - -- -
上述代码中，container 是包含要居中的元素的容器，center 是要居中的元素，grid-column 属性表示元素应该占据的列数。
垂直居中
要实现垂直居中，只需将要居中的元素放在一个容器中，然后设置该容器的 display 属性为 grid，再将容器中的元素的 grid-row 属性设置为 2 / 3。如下所示：
---------- - -------- ----- -------------- ------- - ------- - --------- - - -- -
上述代码中，container 是包含要居中的元素的容器，center 是要居中的元素，grid-row 属性表示元素应该占据的行数。
水平垂直居中
要实现水平垂直居中，只需将要居中的元素放在一个容器中，然后设置该容器的 display 属性为 grid，再将容器中的元素的 grid-column 和 grid-row 属性都设置为 2 / 3。如下所示：
---------- - -------- ----- ---------------- ------- -------------- ------- - ------- - ------------ - - -- --------- - - -- -
上述代码中，container 是包含要居中的元素的容器，center 是要居中的元素，grid-column 和 grid-row 属性都表示元素应该占据的行数和列数。
自适应宽度实现
要实现自适应宽度，只需将要自适应宽度的元素放在一个容器中，然后设置该容器的 display 属性为 grid，再将容器中的元素的 grid-column 属性设置为 1 / -1。如下所示：
---------- - -------- ----- - --------- - ------------ - - --- -
上述代码中，container 是包含要自适应宽度的元素的容器，adaptive 是要自适应宽度的元素，grid-column 属性表示元素应该占据的列数，1 / -1 表示从第一列到最后一列，即占据整个网格。
紧贴底部实现
要实现紧贴底部，只需将要紧贴底部的元素放在一个容器中，然后设置该容器的 display 属性为 grid，再将容器中的元素的 grid-row 属性设置为 -1。如下所示：
---------- - -------- ----- - ------- - --------- --- -
上述代码中，container 是包含要紧贴底部的元素的容器，bottom 是要紧贴底部的元素，grid-row 属性表示元素应该占据的行数，-1 表示倒数第一行，即最后一行。
示例代码
以下是一个完整的示例代码，演示了如何使用 CSS Grid 布局实现居中、自适应宽度、紧贴底部等布局效果：
--------- -----
------
------
---------- ---- ------------
-------
---------- -
-------- -----
---------------------- --------- -----
------------------- --------- -----
--------- -----
------- ------
------- --- ----- ------
-
------- -
------------ - - --
--------- - - --
----------------- -------
-
--------- -
------------ - - ---
----------------- ------
-
------- -
--------- ---
----------------- -----
-
--------
-------
------
---- ------------------
---- -----------------------
---- ----------------------------
---- -------------------------
------
-------
-------上述代码中，container 是包含要实现布局效果的容器，center、adaptive、bottom 分别是要居中、自适应宽度、紧贴底部的元素。
总结
CSS Grid 布局是一种灵活且强大的布局方式，可以轻松实现居中、自适应宽度、紧贴底部等布局效果。掌握 CSS Grid 布局可以提高前端开发的效率和质量，值得学习和掌握。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65e161141886fbafa4e62c35