前言
在前端开发中，布局是一个最基础的需求。而随着移动设备的普及，响应式布局也变成了必须要掌握的技能。在 CSS 中，除了使用 float 和 position，还有一个比较新的布局方式——CSS Grid 布局。
CSS Grid 布局是一个强大而灵活的工具，它可以让我们轻松制作出响应式布局。本文将以制作响应式文字排版为例，详细讲解如何使用 CSS Grid 布局。
正文
CSS Grid 布局简介
CSS Grid 布局是一种二维的布局系统，可以同时控制行和列的大小和位置。在网页中，可以看成是一个分隔为多个网格的布局。容器（我们可以把它理解成一个 HTML 元素）通过 display: grid 属性声明成一个网格容器，然后在网格容器中定义行列。
网格容器和网格项目
在 CSS Grid 布局中，我们可以把一个网格容器理解成一个网格的总体框架，它是一个可以包含网格项目的容器。网格项目是指网格内的每一个元素，它可以是文本，图片，表格等。
下面就是一个简单的 CSS Grid 布局：
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.grid-item {
background-color: #ccc;
}其中，grid-template-columns 定义了网格容器的列数和每一列的大小（这里是等分），grid-template-rows 定义了网格容器的行数和每一行的大小。而 grid-item 则是网格项目，这里的 background-color 是为了方便看出网格的效果。
制作响应式文字排版
我们以制作响应式文字排版为例，来详细介绍如何使用 CSS Grid 布局。
HTML 结构
首先，我们需要定义一个 HTML 结构。目前，为了支持响应式布局，最好采用 Flex 布局和 Grid 布局相结合的方式。下面是一个 HTML 结构示例：
// www.javascriptcn.com code example
<div class="container">
<header>
<h1>标题</h1>
<p>副标题</p>
</header>
<main>
<article>
<h2>文章标题</h2>
<p>文章内容</p>
</article>
<article>
<h2>文章标题</h2>
<p>文章内容</p>
</article>
<article>
<h2>文章标题</h2>
<p>文章内容</p>
</article>
</main>
<aside>
<h2>侧栏标题</h2>
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
</aside>
<footer>
<p>版权信息</p>
</footer>
</div>CSS 样式
接下来，我们需要为这个 HTML 结构添加一些 CSS 样式。首先，我们需要将 .container 设置为网格容器：
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto repeat(3, minmax(100px, auto));
grid-gap: 20px;
padding: 20px;
}这里定义了网格容器的列数是 4，行数是 4（其中第一行是 auto，自适应高度，而第 2~4 行都是至少为 100px 高度的自适应高度）。同时，加上了 20px 的间距和 20px 的 padding。
接下来，我们需要定义每一个网格项目的样式：
// www.javascriptcn.com code example
header {
grid-column: 1 / -1;
text-align: center;
}
main {
grid-column: 1 / -2;
}
aside {
grid-column: -2 / -1;
}
footer {
grid-column: 1 / -1;
}
article, aside {
padding: 20px;
background-color: #FAF9F6;
}这里，我们给每一个项目都加上了一些样式，然后使用 grid-column 属性确定了它们的位置。具体而言，header 占据了整个网格容器的第一行，main 占据了除了最后一列的整个网格容器，aside 占据了最后一列，footer 占据了整个网格容器的最后一行。而 article 和 aside 则是对应填充整个网格中的文章和侧栏，加上了背景色和 padding。
最后，我们需要为响应式布局的不同大小添加样式：
// www.javascriptcn.com code example
@media screen and (max-width: 1200px) {
.container {
grid-template-columns: repeat(3, 1fr);
}
main {
grid-column: 1 / -1;
}
aside {
grid-column: 1 / -1;
}
}
@media screen and (max-width: 767px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: auto repeat(5, auto);
}
header, main, aside, footer {
grid-column: 1 / -1;
}
}这里，我们根据设备宽度的不同来分别定义了 3 种情况下的样式，分别是：宽度大于 1200px、宽度在 1200px~767px 之间和宽度小于 767px。在不同的设备宽度中，我们可以灵活地定义 grid-template-columns 和其他样式，以适应不同的屏幕大小和设备类型。
结语
通过上面的实例，相信大家已经对 CSS Grid 布局有了一定的了解。事实上，CSS Grid 布局还有很多的细节和技巧值得研究。
在实际开发过程中，CSS Grid 布局可以为我们在不同设备上实现响应式布局提供强大的支持。而且，虽然它可能需要一些时间来学习和掌握，但一旦掌握了，可以为我们的前端开发带来更好的体验和效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d6a96da941bf7134c72949