网格布局（Grid Layout）是一种新的 CSS 布局方式，它通过将页面分割成网格来实现布局，比传统布局方式更加灵活和强大。CSS Grid 的出现大大简化了前端开发者的布局工作，下面我们将介绍如何使用 CSS Grid 实现网格布局。
1. 基本概念
在使用 CSS Grid 实现网格布局之前，我们需要先了解一些基本概念：
1.1 网格容器（Grid Container）
网格容器是一个 HTML 元素，它是网格的父元素，通过设置该元素的属性来定义网格布局。
1.2 网格项（Grid Item）
网格项是网格容器内的子元素，它们被放置在网格中。
1.3 网格线（Grid Line）
网格线是网格中的线条，它们用于定义网格的行和列。
1.4 网格轨道（Grid Track）
网格轨道是网格线之间的区域，它们分为行轨道和列轨道。
1.5 网格单元格（Grid Cell）
网格单元格是网格中的一个矩形区域，它被定义在行轨道和列轨道之间。
2. 网格布局的实现
2.1 定义网格容器
要使用 CSS Grid 实现网格布局，首先需要定义一个网格容器。我们可以通过设置容器的 display 属性为 grid 或 inline-grid 来将其定义为网格容器。
.container {
display: grid;
}2.2 定义网格行和列
定义网格行和列是网格布局的核心。我们可以通过设置容器的 grid-template-rows 和 grid-template-columns 属性来定义网格的行和列。
.container {
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: 1fr 2fr;
}上面的代码定义了一个包含两行两列的网格，第一行高度为 100 像素，第二行高度为 100 像素，第一列宽度为网格容器宽度的 1/3，第二列宽度为网格容器宽度的 2/3。
2.3 放置网格项
将网格项放置在网格中是网格布局的最后一步。我们可以通过设置网格项的 grid-row 和 grid-column 属性来放置网格项。
<div class="container"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> <div class="item4">Item 4</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------------------- ----- ------ ---------------------- --- ---- - ------ - --------- - - -- ------------ - - -- - ------ - --------- - - -- ------------ - - -- - ------ - --------- - - -- ------------ - - -- - ------ - --------- - - -- ------------ - - -- -
上面的代码将四个网格项放置在了网格中。
3. 总结
CSS Grid 是一个非常强大的布局方式，它可以大大简化前端开发者的布局工作。本文介绍了 CSS Grid 的基本概念和实现方法，希望对你的学习和实践有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c7d295add4f0e0ff1c3fd1