在前端开发过程中，网站布局是一个极其重要的环节。一个好的布局样式可以让网站的使用体验更加优秀，也能大幅提升用户对网站的印象。而在众多的布局方案中，CSS Grid 最近引起了很多关注，它能够简单有效地重构原本杂乱无序的布局，让页面结构更加清晰、灵活。
CSS Grid 在网页布局方面的优势，在于它可以为页面内的标签、元素等定制化的网格和列布局，使用起来极其方便和灵活。通过使用 CSS Grid，我们可以将网站实现的非常符合我们的设计，同时还能够提高其可读性和可维护性。
CSS Grid 基础概述
CSS Grid 布局是一个二维的布局系统，旨在将页面分成行和列，形成一个网格，我们可以将内容放置在这个网格中。每一列或行都可以被分为一个或多个网格单元格，我们可通过定义单元格的大小和距离来控制整个布局。 CSS Grid 中使用的概念包括容器（container）、项目（item）、行（row）、列（column)、单元格（grid cell）、网格线（grid line）、网格轨迹（grid track）和网格区域（grid area）等。
容器和项目
CSS Grid 布局的核心在于标签通常被放在一个容器之内，容器可以设置行与列的数量与大小，定义网格单元格和其他诸多属性，而项目则是容器中真正需要布置的成员。项目（item）可以放在一个或多个单元格之内，单元格的大小可以调整，项目也可以跨越多个单元格，来填充整个布局。
下面是一个基本的 CSS Grid 布局示例：
-- -------------------- ---- ------- ---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ------
我们可以在这个基本的结构中定义网格布局：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ---------------------- ----- ----- ------ ------------------- ----- ----- ------ --------- ----- - ----- - ----------------- ----- ------- --- ----- ----- ----------- ------- -------- ----- -
在这个例子中，我们定义了一个 3 行 3 列的网格布局，每个单元格的宽高都为 100px，每个单元格之间相隔 10px。
行和列
我们可以使用 CSS Grid 定义不同数量的行和列，来切分网格。默认情况下，容器的网格被分成一个行和一列。这些行和列在容器的网格子元素中经常被称为网格线，我们可以使用这些网格线来定位网格单元格和网格区域。
下面是一个使用 CSS Grid 定义三列的布局：
.container {
display: grid;
grid-template-columns: 300px 400px 300px;
}在这个例子中，我们定义了一个包含三列的网格布局，其中第一列宽度为 100px，第二列宽度为 200px，第三列宽度为 100px。
我们也可以使用百分比定义大量的行和列，使它们基于容器的大小进行缩放，这对响应式网页设计非常有帮助：
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
}在这个例子中，我们定义了 3 行、3 列的网格布局，每一行和每一列都使用了 1fr 单位，其中 auto 默认为浏览器对内容的最小宽度限制。
单元格和网格线
除了定义行和列之外，我们可以进一步定义每个单元格的大小和形状。例如，可以把一个单元格划分成多个网格单元格，可以在容器中定义水平和垂直网格线，方法如下：
-- -------------------- ---- -------
---------- -
-------- -----
---------------------- --- --- ----
------------------- ---- ---- -----
--------------------
------- ------ -------
---- ---- ------
------- ------ --------
-
------- -
---------- -------
-
---- -
---------- ----
-
----- -
---------- -----
-
------ -
---------- ------
-
------- -
---------- -------
-在这个示例中，我们使用 grid-template-areas 定义了网格布局，并使用 grid-area 将元素放置在指定的区域中。
使用 CSS Grid 进行网站布局
拥有了 CSS Grid 的基本概念之后，我们现在可以更加具体地了解如何使用它来设计和优化我们的网站布局效果。
1. 使用 CSS Grid 进行网站主体区域布局
首先，考虑我们网站的主体区域，CSS Grid 可以让我们很容易地在主体区域中设置每行和列的比例。因此，我们可以根据网站主题和内容，使用 CSS Grid 对网站主体区域进行布局。下面是一个经典的双栏主体区域布局:
<div class="container"> <div class="header">Header</div> <div class="sidebar">Sidebar Content</div> <div class="main">Main Content</div> <div class="footer">Footer</div> </div>
我们可以使用 CSS Grid 实现这个布局，其中网站主体区域被划分为两列，主内容区域占据左侧区域，侧边栏则占据右侧区域：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --- ---- - ------- - ------------ - - -- - -------- - ------------ - - -- - ----- - ------------ - - -- - ------- - ------------ - - -- -
2. 使用 CSS Grid 来制定网站页面布局外观
除了主体区域布局之外，我们也可以使用 CSS Grid 来设计页面外观。例如，可以使用 CSS Grid 定义一个网格布局，使得网站中的所有模块都占据一个完整的网格单元格。这种布局可以使得网站看起来更加整齐，并帮助用户高效地找到所需的信息。
-- -------------------- ---- ------- ---- ------------------ ---- ----------------------------------- ---- --------------------------- ---- ----------------------- ------------- ---- ----------------- ------------- ---- ------------------------------- ---- --------------------- ----------- ---- --------------------------- ------
下面是使用 CSS Grid 布局的应用：
-- -------------------- ---- -------
---------- -
-------- -----
--------------------
----------- ------ -------
-------- ---- -----
---- ------ --------
---------------------- ----- --- ----
------------------- ----- --- -----
------------- ----
---------------- -----
-
----------- -
---------- -----------
-
------- -
---------- -------
-
-------- -
---------- --------
-
----- -
---------- -----
-
---- -
---------- ----
-
------- -
---------- -------
-
------- -
---------- -------
-在这个布局中，我们使用了 CSS Grid 定义了一个 3 行 3 列的布局，每一个元素被定义为一个网格区域。网格区域既可以使用名称指定，也可以使用数字。此外，我们还定义了行和列之间的间隔和大小。
3. 使用 CSS Grid 进行网站表格布局
最后一个例子是使用 CSS Grid 来布局表格。相比于使用其他技术手段（例如 tables 或 flexboxes)，CSS Grid 在布局表格方面更为强大和灵活。
-- -------------------- ---- -------
------ ------------------
-------
----
---------- ------
---------- ------
---------- ------
---------- ------
-----
--------
-------
----
-------- ------
-------- ------
-------- ------
-------- ------
-----
----
-------- ------
-------- ------
-------- ------
-------- ------
-----
--------
--------下面是我们可以使用的 CSS Grid 样式来布局这个表格：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ----- - ----- --- ----- ------------------- - -------------- --- ----- ------ - --- -- - -------- ----- ----------- ------- -
在这个布局中，我们使用了 repeat() 函数简化了 CSS 代码。该函数使其更容易表示某些排列模式，如 "将四个列表格宽度平均分配"。同时我们也增加了样式美化表现。
总结
CSS Grid 是一种创新而强大的网页布局技术，可以方便地实现未来的响应式网页设计。它提供了广泛的 API 和选项，使其可以适应所有类型的布局需求。在日益重视“自适应”和“跨终端”等设计特性的今天，我们相信 CSS Grid 将会越来越受欢迎，也将成为我们设计高质量的网页布局的重要工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64576555968c7c53b0a1da2b