CSS Grid 是一个新的布局模块，它为我们提供了一种更简单、更灵活的方式来布置网页的元素。CSS Grid 框架允许我们在网格中设置行和列，以及在每个网格中创建多个项目。本教程将详细讲解 CSS Grid 框架的使用方法，包括网格，项目和单位。
CSS Grid 网格
在 CSS Grid 框架中，网格是由行和列组成的。通过设置网格行和列，我们可以创建一个支持多个元素和项目的模式。例如，下面示例的 CSS 代码片段创建了一个带有三行和三列的网格：
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px 100px;
}该示例中，我们使用 display: grid 属性指定该元素具有网格行和列，并使用 grid-template-columns 和 grid-template-rows 属性定义了三行和三列的网格。
CSS Grid 项目
在 CSS Grid 框架中，项目是位于网格内的元素。HTML 的元素可以放置在网格容器中。然后，我们可以使用 grid-row 和 grid-column 属性控制一个项目在网格中所占的行和列。
例如，下面的示例 HTML 代码中包括一个包含两个子项目的网格容器：
<div class="grid-container"> <div class="grid-item">项目 1</div> <div class="grid-item">项目 2</div> </div>
然后，我们可以使用以下 CSS 代码片段将两个项目放置在网格的顶部左侧和顶部右侧：
-- -------------------- ---- ------- ---------- - --------- -- ------------ -- - ------------------------- - --------- -- ------------ -- -
在该示例中，grid-row 和 grid-column 属性分别控制了每个项目在网格中所占用的行和列。
CSS Grid 单位
CSS Grid 框架支持几种不同的单位类型，用于控制网格中网格线和网格项目的大小和位置。
固定大小的单位
元素可以使用像素、厘米或英寸来表示其大小。下面是一个使用像素单位定义网格行和列的示例：
.grid-container {
grid-template-columns: 150px 150px 150px;
grid-template-rows: 100px 100px 100px;
}在该示例中，网格容器具有三列和三行。每列的宽度为 150 像素，每行的高度为 100 像素。
自适应的单位
fr 单位表示一个可用空间的分数。例如，下面示例代码中，我们使用 fr 单位定义了两个自适应的列，它们将占用容器中剩余的宽度：
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
}在该示例中，第一个列的宽度将为容器中可用宽度的一半，第二个列的宽度将为容器中的剩余宽度。我们可以使用这种自适应的单位来创建更灵活的布局，根据不同的屏幕尺寸、设备和内容适应网页。
示例代码
下面示例代码展示了如何使用 CSS Grid 框架创建一个简单的两列布局：
-- -------------------- ---- ------- ---- ----------------------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ------ ------- --------------- - -------- ----- ---------------------- --- ---- --------- ----- - ---------- - ----------------- ----- -------- ----- - --------
在该示例中，我们创建了包含两列的网格，每列的宽度分别为容器宽度的一半。我们还设置了 grid-gap 属性，以在每个项目之间创建一个 20 像素的间隔。我们使用 padding 属性添加了项目的内部填充和背景颜色。
总结
CSS Grid 框架提供了一种更简单、更灵活的布局方式，能够更好地适应不同的屏幕尺寸和浏览器环境。本教程中介绍了如何使用 CSS Grid 框架创建网格、项目和使用不同的单位控制它们。希望你通过学习，能够更加熟悉和掌握 CSS Grid 框架的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e80959f6b2d6eab3372b34