最近几年，Web 前端开发中出现了大量的前端框架，如 Bootstrap、Foundation、Semantic UI 等等。框架为我们提供了众多强大的 CSS 布局工具，但有些时候，这些框架中的工具往往不能完全满足我们的需求。那么我们该如何在不依赖于框架的情况下，自由地进行布局呢？
今天，我们将介绍一种让我们自由地进行布局的 CSS 布局模块——CSS Grid，并且，我们将会探讨如何使用 CSS Grid 来实现弹性盒子布局。
CSS Grid 是什么？
CSS Grid Layout 是一种强大的二维布局系统，可以让我们自由地布置 HTML 元素。通过定义行、列，以及它们的尺寸和间距，我们可以以完全可控的方式创建网格布局。
弹性盒子布局
弹性盒子布局（Flexbox）是另一种流行的 CSS 布局模块，它肩负着在一维上创建弹性元素布局的任务，如垂直或水平方向的布局。由于缺乏二维布局的能力，弹性盒子布局在某些情况下无法满足我们的需求，这时候就应该该考虑使用 CSS Grid 了。
如何使用 CSS Grid 实现弹性盒子布局？
1. 定义网格容器
要使用 CSS Grid 创建一个网格布局，首先需要定义一个网格容器，可以通过 display: grid 来实现。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}上面这段代码定义一个包含三列的网格容器，每一列的宽度被设置为 1fr，它们之间的间距是 10px。
2. 在网格容器中放置元素
在我们定义了网格容器之后，我们需要将元素放置在这个容器中。我们可以通过 grid-column 和 grid-row 来指定元素在网格中所占的位置。
<div class="container"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</div> <div class="item item4">4</div> <div class="item item5">5</div> <div class="item item6">6</div> </div>
-- -------------------- ---- ------- ----- - ----------------- ------- ------ ----- ---------- ----- ----------- ------- -------- ----- - ------ - ------------ - - ---- -- - ------ - ------------ -- --------- - - ---- -- - ------ - ------------ -- --------- -- - ------ - --------- -- ------------ -- - ------ - ------------ -- --------- -- - ------ - ------------ -- --------- -- -
上面这段代码定义了一个包含 6 个元素的网格布局，并指定了每个元素在网格中所占的位置。具体来说：
item1占据从第一列开始的 2 列item2占据第三列，以及从第一行开始的 2 行item3占据第一列，第二行item4占据第三行，第一列item5占据第三行，第二列item6占据第三行，第三列
生成的布局如下图所示：
容器和元素的其他设置
我们还可以进行许多其他的设置来自定义我们的网格布局。例如，我们可以使用 grid-template-rows 属性自定义行的大小，使用 justify-items 和 align-items 属性为元素设置水平和垂直对齐方式，使用 justify-content 和 align-content 属性为整个网格容器设置水平和垂直对齐方式等等。
除此之外，我们还可以使用 Media Query 和 Grid 布局的响应式设计能力，通过修改行和列的定义来适应不同的屏幕尺寸。
总结
CSS Grid Layout 是一种可控的二维布局系统，可以让我们更加灵活自由地布置网页元素。通过定义网格容器，以及每一个元素所占据的位置，我们可以创建各种不同的网格布局，包括弹性盒子布局。掌握了这项技术，我们可以不依赖于框架，自由地进行前端布局设计和开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ecc5548841e9894e79f65