引言
CSS Grid 布局是一种全新的、灵活而强大的布局方式。它能够帮助我们在页面中创建更为复杂的布局，而且使用起来比起以往的布局方式更加简单。在本篇文章中，我将分享我的学习心路历程，并且提供一些实用的指导意义和示例代码。
初步探索
当我第一次听到 CSS Grid 布局时，我很快就开始了解了什么是 CSS Grid 布局，以及它是如何工作的。我很快发现，这个新的布局工具比 CSS Flexbox 更加强大，因为它可以让我们进行更为深入的控制，同时也让复杂的布局变得更为容易。显然，我也发现了一些缺点，包括跨浏览器的兼容性问题和导致 CSS 文件变得更加复杂艰涩的代码。
CSS Grid 布局的核心概念
在开始学习 CSS Grid 布局之前，我们需要了解其核心概念，每个概念都需要透彻理解，这些概念包括：
- 父容器（Grid容器）：包含了要进行布局的项目（Grid项）的容器
- 行（Row）：位于Grid容器中的一条水平线
- 列（Column）：位于Grid容器中的一条竖线
- 单元格（Cell）：位于行和列的交叉点上，包含了一个或多个Grid项
- Grid线（Grid Line）：位于行或列的左边或上方，或者右边或下方
基本语法
CSS Grid 布局的语法可以看起来比较混乱，因为它使用了多个新的属性，并且需要对它们进行归类才能使它们合理地工作。下面是一些我认为最重要的属性：
display
我们首先需要告诉浏览器，我们使用的是 CSS Grid 布局。我们可以通过将 display 属性设置为 grid 来实现这一点。
.container {
display: grid;
}我们还可以使用 inline-grid 来设置行内的网格布局，但使用这种方法可能会限制我们应用更为常见的样式。
grid-template-columns 和 grid-template-rows
在使用 CSS Grid 布局时，我们需要告诉浏览器应该如何分配空间。我们可以定义行和列的大小，以便我们能够更好地控制我们的布局。
.container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 100px 200px 300px;
}上述示例中，我们定义了三个等宽的列和三个不同高度的行。我们还可以使用像 fr 和 minmax() 这样的单元，以便更好地控制我们的布局。例如：
.container {
display: grid;
grid-template-columns: 1fr 2fr 5fr;
grid-template-rows: 100px 200px 1fr;
}在这个例子中，我们定义了三列，其中第一列占用剩余空间的三分之一，第二列占用剩余空间的三分之二，第三列占用所有剩余的空间。
grid-template-areas
除了可以通过设置行和列的大小来控制我们的布局，我们还可以使用 grid-template-areas 来更好地控制位置。我们可以把我们的布局分成一个网格，并给它们命名。例如：
-- -------------------- ---- -------
---------- -
-------- -----
---------------------- --- --- ----
------------------- ---- ---- -----
--------------------
------- ------ -------
-------- ---- -----
------- ------ --------
-在这个例子中，我们定义了一个网格，其中有三列和三行。我们还给它们命名，从而更好地控制它们的位置。grid-template-areas 属性可以接受类似多行字符串的格式，第一行代表第一行，第二行代表第二行，以此类推。
grid-template
使用 grid-template 来一次性设置行和列的大小和位置，在这里，我们可以简单地定义这些项的值，使它们更易于阅读和组合。例如：
.container {
display: grid;
grid-template:
"header header header" 100px
"sidebar main main" 300px
"footer footer footer" 120px / 1fr 2fr 3fr;
}除了上述属性外，CSS Grid 布局还有很多其他属性，如果您想要详细了解，可以查看 CSS Grid。
应用示例
下面是一个示例，在其中展示了如何使用 CSS Grid 布局来创建一个简单的布局：
-- -------------------- ---- -------
---------- -
-------- -----
---------------------- --- ----
------------------- ---- ----
--------------------
------- -------
-------- ------
------- ------
-
------ -
---------- -------
----------------- --------
-
------- -
---------- --------
----------------- --------
-
---- -
---------- -----
----------------- --------
-这个示例定义了一个网格，其中有两列和两行。第一行用于标题，第二行分成两个部分，第一部分用于侧栏，第二部分用于主要内容。我们还通过使用 height: 100vh 让网格填充屏幕的高度。
总结
CSS Grid 布局是一种强大的网格布局工具，它允许我们更好地控制我们的布局。虽然它需要花时间学习和理解，但是学会使用它后，我们就可以更加轻松快捷地进行复杂的布局控制。
我希望这篇文章能够帮助您了解 CSS Grid 布局的核心概念和基本语法，以及如何将它们应用到实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6479701b968c7c53b0573e8a