什么是 CSS Grid
CSS Grid 是一种二维网格布局系统，可以很容易地实现复杂的网站布局。它是基于网格线（grid lines）和单元格（grid cells）来构建布局的。
相比传统的布局方式，CSS Grid 提供了更多的灵活性和控制性。使用它可以轻松地实现栅格布局、响应式布局、多列布局、居中布局等等。
CSS Grid 的基本概念
在使用 CSS Grid 时，需要了解一些基本概念：
- 网格容器：将网格布局应用到的父元素。
- 网格项：网格容器中的子元素，可以是任何元素。
- 网格行 / 列：网格容器中由水平和垂直线组成的网格。
- 网格线：划分网格行 / 列的线，可以是垂直线（column line）或水平线（row line）。
- 网格轨道：相邻网格线之间的区域。
- 网格区域：由四条网格线围成的矩形区域，可以跨越多个网格。
实战演练：从零开始实现完整的网站布局
下面我们将从零开始使用 CSS Grid 实现一个完整的网站布局。这个布局包括网站的 header、main、footer、sidebar 等部分，主体部分采用两列布局。
步骤：
- 创建 HTML 结构
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ---- ----------
----- ---------------- ------------------
-------
------
--------
------- ---- -------
---------
------
---- -------------
-------------
-------- ----- ----- --- ----- ----------- ---------- ----- ------ ------ ------ --------- --- -------- ---- ------ -- ------ --- -- -------- ------ ------- ----------- ----- -- ----- --------- --------- -- --------- --- -- ---- --------- -------------
------
---- --------------
-------------
-------- ----- ----- --- ----- ----------- ---------- ----- ------ ------ ------ --------- --- -------- ---- ------ -- ------ --- -- -------- ------ ------- ----------- ----- -- ----- --------- --------- -- --------- --- -- ---- --------- -------------
------
-------
--------
------- ------ ---- --- ---- ------
---------
-------
-------- 添加 CSS 样式
-- -------------------- ---- -------
---- -
------- --
-------- --
-
------ -
----------------- -----
----------- -------
-------- -----
-
---- -
-------- -----
---------------------- --- ----
--------- -----
-------- -----
-
------ ------ -
----------------- -----
-------- -----
-
------ -
----------------- -----
----------- -------
-------- -----
-- 解析 CSS 样式
首先，我们将 body 元素的 margin 和 padding 属性设置为 0，这样可以去掉页面的默认外边距和内边距。
然后，我们给 header 和 footer 元素设置背景颜色、居中对齐和内边距。我们用 text-align: center 将标题文本居中对齐。
下一步，我们将 main 元素设置为网格容器。使用 grid-template-columns 属性，我们将页面左侧的列设置为 1fr 宽度，右侧的列设置为 2fr 宽度。这意味着左侧列占用 main 宽度的 1/3，右侧列占用 2/3。
我们还使用了 grid-gap 属性定义了网格项之间的空隙大小，这里设置为 20px。
最后，我们将 left 和 right 元素分别设置为网格项，并添加了背景颜色和内边距。
- 效果展示
总结
通过本文的实例，我们可以看到 CSS Grid 可以轻松实现复杂的网站布局。我们希望您通过阅读本文，对 CSS Grid 的基本概念和实际应用有所了解，并能够尝试使用 CSS Grid 实现更多复杂的布局。
完整示例代码：https://codepen.io/huiqiang513/full/WNjMxoL
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a784e848841e9894406a63