作为前端开发人员，在网页布局中使用 CSS 是非常重要的一项技能。然而，以前我们的网页布局是基于传统的盒模型和浮动布局，使得我们无法轻松地实现复杂的网页布局。 CSS Grid 就是因为这个问题而被提出的一种新的网页布局方式。CSS Grid 提供了一个更加直观的布局模型，使得我们能够更轻松地实现网页的复杂布局。
什么是 CSS Grid？
CSS Grid 是一种基于网格的布局系统，允许我们将网页内容分割成行和列，并让我们随意的在这些行和列中排列我们的网页元素，从而实现精准的布局。CSS Grid 是一种强有力的布局模型，它使我们可以处理大多数布局需求。它是一个完全的二维布局系统，它比基于浮动的布局和基于表格的布局更加灵活。
开始使用 CSS Grid
在开始学习 CSS Grid 语法之前，我们需要了解一些基础概念。
网格网格行和列
在 CSS Grid 中，网页被划分为网格。每个网格都由一定数量的行和列组成，这个数量由你自己来定义。CSS Grid 中的行和列被统称为 "网格轨道"，这些网格轨道定义了网格线。
网格线
网格线是网格轨道的分界线。一个网格可以由一条或多条水平线和垂直线组成。这些线可以帮助我们定义网格的大小和位置。
网格单元格
网格中的每一个网格交点就是一个网格单元格，一个网格单元格就是一个元素可以被放置的位置。
网格容器和网格项
在 CSS Grid 中，我们需要指定哪些元素属于一个网格容器，这个容器就是我们需要进行布局的父元素。父元素内部的我们需要进行布局的子元素就是网格项。每一个网格项都被放置在网格容器中的网格单元格中。
在 CSS Grid 中有三种不同的布局方法，分别是：
- 明确的网格定义
- 隐式的网格定义
- 网格区域
接下来，我们将对这些布局方法进行更加详细的探讨。
处理网格定义
在 CSS Grid 中，我们可以使用 "grid-template-columns" 和 "grid-template-rows" 属性来定义我们的网格。对于每一个属性，我们需要指定一组大小和单位，并使用空格将每一个值分割开来。
例如，下面的 CSS 代码演示了如何定义一个有三个列和两个行的网格：
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
}这个代码将创建一个有 3 列和 2 行的网格。每个列都有一个宽度为 100px 的大小，每个行都有一个高度为 50px 的大小。
隐式网格定义
在我们定义一个网格的时候，我们可以使用上面提到的 "grid-template-columns" 和 "grid-template-rows" 属性来显式的定义列和行。然而，有时候我们可能需要更加灵活的布局方式。在这种情况下，我们可以使用 "grid-auto-rows" 和 "grid-auto-columns" 来定义一个隐式的网格。
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-auto-rows: 50px;
}这个示例代码将定义网格容器拥有 3 列，因为我们使用了 "grid-template-columns"，但是我们只显式地定义了 3 行。因此，我们需要通过定义 "grid-auto-rows" 属性来定义剩余行的大小以及高度。
网格区域
在 CSS Grid 中，我们可以使用网格区域来更容易地布局我们的元素。网格区域是由多个单元格组成的矩形区域。这些单元格可以被任意定义，我们可以为它们分配一个名称，并在其他地方使用这个名称来查找区域。
-- -------------------- ---- -------
--------------- -
-------- -----
---------------------- ----- ----- ------
------------------- ---- -----
--------------------
------- ------ -------
---- ---- -----
---- ------ --------
-
------- -
---------- -------
-
---- -
---------- ----
-
----- -
---------- -----
-
------- -
---------- -------
-在这个示例代码中，我们使用 "grid-template-areas" 来定义我们的网格区域。然后我们可以将 "grid-area" 属性用于具体的网格项目上，并通过网格区域的名称来定义它们的位置。
总结
CSS Grid 是一个非常强大的布局模型，它为我们提供了更加直观的布局方式，使我们可以更容易地进行网页布局。在这篇文章中，我们介绍了 CSS Grid 的基本概念，包括网格行、列、网格线、网格单元格、网格容器和网格项。接下来，我们探讨了三种不同的布局方法，即：明确的网格定义、隐式的网格定义和网格区域。通过了解 CSS Grid 的基础知识和语法，希望本文对您学习和使用 CSS Grid 有所帮助。
参考代码：
<div class="grid-container"> <div class="header">Header</div> <div class="nav">Nav</div> <div class="main">Main</div> <div class="footer">Footer</div> </div>
-- -------------------- ---- -------
--------------- -
-------- -----
---------------------- ----- ----- ------
------------------- ---- -----
--------------------
------- ------ -------
---- ---- -----
---- ------ --------
-
------- -
---------- -------
-
---- -
---------- ----
-
----- -
---------- -----
-
------- -
---------- -------
-
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6491951948841e9894f9f401