前言
自 2017 年 CSS Grid 推出以来，它带来的变革深刻影响着前端开发的方方面面。众所周知，CSS Grid 在实现布局方面提供了极大的便利性，而最新推出的一些属性则使得它的实用性更加广泛。在本文中，我将介绍 CSS Grid 新属性，并结合一个固定折叠布局的示例，以帮助读者更好的学习和理解。
CSS Grid 新属性
grid-template-rows 与 grid-template-columns 属性
在实现网格布局时，我们经常会使用到 grid-template-rows 和 grid-template-columns 这两个属性。它们分别用于定义网格容器的行和列，类似于下面的代码：
.container {
display: grid;
grid-template-rows: repeat(3, 1fr); // 定义 3 行
grid-template-columns: repeat(2, 1fr); // 定义 2 列
}这段代码将会生成一个有 3 行，2 列的网格，其中每一行和每一列宽度相等。
然而，在最近的更新中，这两个属性被赋予了更加灵活的能力，我们可以使用它们来定义一个固定数量的网格，而我们不再需要使用 repeat() 函数。例如，你可以像下面这样进行定义：
.container {
display: grid;
grid-template-rows: 50px 100px 150px; // 定义行高
grid-template-columns: 30% 70%; // 定义列宽（百分比）
}这段代码将会生成一个有 3 行，2 列的网格，第一行高度为 50 像素，第二行高度为 100 像素，第三行高度为 150 像素。第一列占据整个宽度的 30%，第二列占据剩余的 70%。
grid-template-areas 属性
grid-template-areas 属性是 CSS Grid 中另一个十分强大的网格属性。它可以按照网格区域的方式来定义布局，例如下面的代码：
-- -------------------- ---- -------
---------- -
-------- -----
--------------------
------- -------
---- -----
------- --------
------------------- ---- --- -----
---------------------- --- ----
-这段代码将会生成一个由 3 行，2 列组成的网格布局，其中的每一个空白区域都可以被定义为一个区域，并通过区域的名称来进行命名。我们可以使用 auto 来自动计算行或列的大小，或者使用 1fr 将剩余空间等分成两份。
grid-auto-flow 属性
在网格布局中，我们通常会在网格容器中定义一定数量的行和列，而这些行和列通常只占据了部分空间。当我们在这些行和列中添加新的网格项时，它们会被放置在哪里？这便涉及到了 grid-auto-flow 属性，它定义了如何放置网格项。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row;
}这段代码将会在网格容器中定义 3 列，然后将网格项从上到下，从左到右依次排列。如果我们将 grid-auto-flow 的值设置为 column，则会使用类似的方式在列上排列网格项。
grid-gap 属性
最后一个要介绍的新属性是 grid-gap，它用于定义网格项之间的空隙。例如：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}这段代码将会在每个网格项之间定义一个 10 像素的间距。
固定折叠布局示例
布局需求
下面是一个视觉效果的图片，它展示了一个常见的固定折叠布局的实现方式：
具体来说，布局如下：
- 左侧栏宽度为 200 像素，上下固定在 50 像素的高度上。
- 右侧栏占据剩余宽度，上部分高度为 75 像素，下部分高度固定为 75% 的高度。
- 顶部导航栏固定在顶部，高度为 50 像素。
- 页面自然下滑时，右侧下部在到达底部之前不会被滚动，直至页面内容溢出。
HTML 结构
首先，我们需要写出静态的 HTML 结构：
-- -------------------- ---- -------
---- ------------------
-----------------------
---------------------
------
---- ----------------------- -----------
---- --------------------
---- --------------- -------------
---- --------------------- -------------
------
-------
-----------------------
------样式实现
接下来，我们需要编写样式来实现固定折叠布局：
-- -------------------- ---- -------
---------- -
-------- -----
------------------- ---- ---- --- -----
---------------------- ----- ----
--------------------
------- -------
---- ----
----- ------
------- --------
------- ------
-
------ -
---------- -------
----------------- --------
------ -----
-------- -----
---------------- -------
------------ -------
-
--- -
---------- ----
----------------- --------
------ -----
-------- -----
---------------- -------
------------ -------
-
----- -
---------- -----
-------- -----
---------------------- ----- ----
-
----------- -
------- -----
----------------- --------
------ -----
-------- -----
---------------- -------
------------ -------
-
------------ -
-------- -----
------------------- ---- ----
--------- -----
----------------- -----
------ -----
-
---- -
----------------- --------
------ -----
-------- -----
---------------- -------
------------ -------
-
------- -
----------------- --------
------ -----
----------- -----
----------- -------- - ---- - ------
-
------ -
---------- -------
----------------- --------
------ -----
-------- -----
---------------- -------
------------ -------
-这段 CSS 代码划分为多个部分：
- 容器样式：使用了 CSS Grid 定义了容器的行和列，同时使用 grid-template-areas 属性来定义每一个子元素在容器中的位置。
- header 和 footer 样式：定义了页面头部和底部的背景颜色、文字颜色、居中对齐等样式。
- nav 样式：定义了导航栏的背景颜色、文字颜色等样式。
- main 样式：该部分展示了如何在 CSS Grid 中包含一个另一个 grid，右侧栏也在这里定义。
- left-panel 样式：定义了左侧栏的背景颜色、文字颜色、居中对齐等样式。
- right-panel 样式：定义了右侧栏的行高和列宽，并设置了一个 10 像素的网格间距。
- top 和 bottom 样式：定义了右侧栏顶部和底部的背景颜色和文字颜色等样式，注意右侧底部需要设置 overflow-y 和 max-height 属性，并使用 calc() 函数计算高度。
- 中间的 ".main" 样式是目前无用的，我们将来可能会用到。
总结
本文介绍了 CSS Grid 的新属性，包括 grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-flow 和 grid-gap。同时，我们使用了一个固定折叠布局示例来演示如何使用 CSS Grid 实现这种布局。该示例涉及到了多个特定的样式属性与计算方式，是一个相对完整的实现方式。希望本文能够帮助读者更好地掌握 CSS Grid 的使用方法，以及实现常见网页布局的技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cf710fb5eee0b5256bdb03