做前端的同学一定很熟悉布局功能，一个好的布局会使得网页更美观，同时可以提高用户的阅读体验。现在CSS Grid已经成为布局方案中不可或缺的一部分，接下来我们就来学习CSS Grid布局的基础知识，并用例子来演示如何使用CSS Grid实现复杂布局。
什么是CSS Grid？
CSS Grid布局是用于HTML元素的二维网格布局系统，可以让我们更加灵活地定位页面中的元素。我们可以将页面分成行和列，并在每个格子中放置HTML元素。CSS Grid布局模块要求浏览器仅仅展示内容的分布格局所对应的位置，而并不关心该框的大小和位置。它提供了一个更加高效的方式来定义网格化布局，而不是使用像浮动布局这样的老式方式。
如何使用CSS Grid？
首先，让我们创建一个简单的网格布局，可以尝试利用以下代码：
<div class="grid"> <div class="item item1">ITEM 1</div> <div class="item item2">ITEM 2</div> <div class="item item3">ITEM 3</div> <div class="item item4">ITEM 4</div> <div class="item item5">ITEM 5</div> <div class="item item6">ITEM 6</div> </div>
-- -------------------- ---- ------- ----- - -------- ----- ---------------------- --------- ----- --------- ----- - ----- - ----------- ----- -------- ----- -
以上示例出现了一个名为 .grid 的容器和六个名为 .item 的子容器。 使用 display: grid 属性可以将容器定义为一个网格布局容器。 在这个示例中，网格容器定义了三个列，并且在每个元素之间有10px的间距。
网格行和列
接下来我们需要通过网格行和网格列布局来实现更复杂的布局。
定义网格行和网格列
要定义网格行和网格列，有以下两个属性:
grid-template-columns: 它可以用来定义网格列。我们可以通过输入 px 物理像素、百分比或请求数量（frac）来设置列宽。要设置多列，请用空格分隔值，如：grid-template-columns: 100px 1fr 2fr;。grid-template-rows: 它可以用来定义网格行。同样的，您可以使用像素、百分比或请求数量来设置行高。
定义网格项的位置
默认情况下，网格项将按照它们在 HTML 中出现的顺序自动分配位置，不需要进一步操作。
如果我们需要更精细地控制布局，可以使用以下属性进行操作：
grid-column-start和grid-column-end可以用来定义一个网格项的左右边界。grid-row-start和grid-row-end可以用来定义一个网格项的上下边界。
例如，要将一个网格项从第一列的第一行转移到第二列的第三行，可以使用以下代码：
.item {
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
}网格线和间隙
grid-row-gap属性定义了行之间的间隔。grid-column-gap属性定义了列之间的间隔。grid-gap属性是grid-row-gap和grid-column-gap的缩写，当我们希望两者相等时，这很方便。
例如，这是一个包含三条水平和三条垂直网格线的网格，每个单元格之间有 10px 的间隙。
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px 100px;
grid-row-gap: 10px;
grid-column-gap: 10px;
}总结
CSS Grid是前端布局的一个非常强大的工具，可以通过网格行和网格列进行灵活排布。我们可以通过CSS Grid来实现各种复杂布局的功能。现在你已经学习了CSS Grid的基础知识，尝试使用它来对网站的样式进行美化和布局吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6479af30968c7c53b05a97a2