CSS Grid 是一种灵活、易用、功能强大的 Web 布局方式，可以用来实现各种复杂布局。其中，侧边栏布局是 CSS Grid 经常用到的一种布局方式，特别适用于那些需要在一定宽度内展示多种信息的网站和应用。
本文将介绍 CSS Grid 如何实现侧边栏布局，通过详细的说明和示例代码，帮助读者学习和掌握如何使用 CSS Grid 来构建简单、灵活的侧边栏布局。
什么是侧边栏布局？
侧边栏布局是一种常用的网站和应用程序布局方式，其特点是将内容分成主要内容区域和侧边栏区域，主要内容区域通常占据布局中的大部分空间，而侧边栏则位于布局的边缘或页面下方，用于展示拓展信息或者导航。
下面是一个简单的侧边栏布局示意图：
如图所示，整个页面分为两个区域：左边是主要内容区域，右边是侧边栏区域。主要内容区域通常包含网站或应用程序的核心功能和信息，而侧边栏通常用于展示一些附加信息，比如链接、导航、广告等。
CSS Grid 实现侧边栏布局的基本思路
实现侧边栏布局，我们通常需要以下几个步骤：
- 创建一个包含两个元素的父容器 (wrapper)，一个用来放主内容区域的 div，一个用来放侧边栏区域的 div。
- 使用 CSS Grid 对父容器进行布局，将其分为两个区域，一边放主内容区域，另一边放侧边栏区域。
- 对主内容区域和侧边栏区域进行样式设置，包括宽度、高度、背景色等。
接下来，我们将一步步详细解释这个流程，并通过示例代码展示如何使用 CSS Grid 实现侧边栏布局。
步骤一：创建一个包含两个元素的父容器 (wrapper)
首先，我们需要在 HTML 中创建一个包含两个 div 元素的父容器 (wrapper)，一个用来放主内容区域的 div，一个用来放侧边栏区域的 div。如下所示：
<div class="wrapper">
<div class="main-content">
<p>这里是主要内容区域。</p>
</div>
<div class="sidebar">
<p>这里是侧边栏区域。</p>
</div>
</div>步骤二：使用 CSS Grid 对父容器进行布局
接着，我们使用 CSS Grid 对父容器进行布局。首先，我们需要将 wrapper 元素设置为一个网格布局容器：
.wrapper {
display: grid;
}然后，我们需要将 wrapper 元素分成两个网格，一边放主要内容区域，一边放侧边栏区域。可以通过 grid-template-columns 属性或者 grid-template-areas 属性来实现。这里我们使用 grid-template-columns 属性来进行布局：
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
}这里我们设置网格容器分成两个网格，每个网格的宽度占据相同的比例（即网格容器中的剩余空间平均分配给两个网格容器）。
现在，我们已经把网格分成两个区域，并让它们并排显示。接着，我们需要设置主要内容区域和侧边栏区域的宽度、高度、背景色等样式。
步骤三：对主内容区域和侧边栏区域进行样式设置
在 CSS 中，我们可以针对 .main-content 和 .sidebar 设置样式，包括宽度、高度、背景色等。例如，下面的代码设置 .main-content 宽度 70%、高度为 100%，背景色为白色：
.main-content {
width: 70%;
height: 100%;
background-color: #fff;
}同样，我们可以设置 .sidebar 宽度为 30%、高度为 100%，背景色为灰色：
.sidebar {
width: 30%;
height: 100%;
background-color: #eee;
}完整示例代码
下面是一个完整的侧边栏布局示例代码：
-- -------------------- ---- -------
--------- -----
------
------
---------- ---- -------------
-------
-------- -
-------- -----
---------------------- --- ----
------- ------
-
------------- -
------ ----
------- -----
----------------- -----
-
-------- -
------ ----
------- -----
----------------- -----
-
--------
-------
------
---- ----------------
---- ---------------------
-----------------
------
---- ----------------
----------------
------
------
-------
-------展示效果
将上述代码保存为 html 文件，用浏览器打开即可查看效果：
如图所示，我们通过 CSS Grid 就成功地实现了一个简单的侧边栏布局。现在，你可以根据自己的需求，对侧边栏布局进行灵活和多样化的设置和设计。
结论
CSS Grid 是一种功能强大、易用、灵活的 Web 布局技术，可用于构建各种复杂布局，包括侧边栏布局。通过本文的介绍和示例，读者可以掌握如何使用 CSS Grid 实现简单、灵活的侧边栏布局，并在自己的项目中应用。希望本文能为读者提供有益的参考和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f65de2c5c563ced583f78f