什么是 CSS Grid？
CSS Grid 是一种现代的，强大的布局系统，可以让开发者更方便地设计页面布局。它采用了一个类似于表格的布局方式，但比表格更强大，更灵活，更易于控制。它可以用于设计任何类型的网页布局，而且可以更好地响应不同屏幕大小的设备。
什么是侧边栏网格布局？
侧边栏网格布局就是将页面划分为两栏，一栏通常是主要内容区域，另一栏则是侧边栏，通常用于展示其他信息，如导航、广告、最新文章等等。这样的布局在现代网页中非常常见，适用于许多不同的场景。
如何使用 CSS Grid 实现侧边栏网格布局？
首先，我们需要在 HTML 中创建两个元素，一个是主要内容区域，一个是侧边栏。代码如下：
<div class="main-content"> <!-- 主要内容 --> </div> <div class="sidebar"> <!-- 侧边栏 --> </div>
接下来，在 CSS 中，我们需要将这两个元素放入一个 Grid 容器中，这样我们就可以使用 Grid 属性来控制它们的布局了。代码如下：
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}在上面的代码中，我们将容器设置为 grid 布局，并使用 grid-template-columns 属性指定两个列，每个列的宽度为 1fr。这意味着两个元素将平均地占据容器的宽度。我们还使用了 grid-gap 属性来指定两个元素之间的间距。
接下来，我们需要将主要内容区域和侧边栏放到两个不同的 grid 单元格中。代码如下：
.main-content {
grid-column: 1;
}
.sidebar {
grid-column: 2;
}在上面的代码中，我们使用 grid-column 属性将主要内容区域放入第一列，将侧边栏放入第二列。
最后，我们为容器设置一些基本的样式，如宽度、最大宽度等。代码如下：
.container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
}在上面的代码中，我们将容器设置为最大宽度为 1200px，宽度为 100%；并使其居中显示。
示例代码
完整代码如下：
-- -------------------- ---- -------
---- ------------------
---- ---------------------
---- ---- ---
------
---- ----------------
---- --- ---
------
------
-------
---------- -
---------- -------
------ -----
------- - -----
-------- -----
---------------------- --- ----
--------- -----
-
------------- -
------------ --
-
-------- -
------------ --
-
--------总结
CSS Grid 是一个强大的布局系统，可以用于设计各种网页布局。使用 CSS Grid 实现侧边栏网格布局非常简单，只需要将主要内容区域和侧边栏放入不同的 grid 单元格中，然后使用 grid-template-columns 属性指定两个列即可。我们可以使用这种布局方式来设计许多常见的网页布局，例如博客、电商、新闻等等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648bb7de48841e9894a0188e