一、前言
随着 Web 技术的不断发展，越来越多的网站都开始采用了栅格布局来构建其页面结构。而 CSS Grid（网格布局）作为 CSS3 的重要特性之一，也逐渐的成为了前端界的热门话题。而在 CSS Grid 中，我们可以用栅格束来实现高度固定并具有自适应的栅格布局，本篇文章就将为你详解如何使用 CSS Grid 来实现这样的布局。
二、什么是栅格束布局
栅格束，在 CSS Grid 中是指一个由一列或多列、一行或多行组成的区域。在栅格束中，我们可以自由地放置任意数量的元素，并指定它们的位置和尺寸，从而实现灵活的布局。
栅格束布局就是通过将网格元素放置在一个栅格束中来实现网格布局的一种方法。在栅格束布局中，我们可以将网格元素分组，并将每组元素放置在一个栅格束中，以此来实现更加复杂的网格布局。
三、实现自适应和固定高度的栅格束布局
在本文中，我们将详细介绍如何使用 CSS Grid 来实现自适应和固定高度的栅格束布局。具体来说，我们将使用 CSS Grid 提供的 grid-template-rows、grid-template-columns 和 grid-template-areas 属性来定义网格容器和栅格束，以及使用 grid-column 和 grid-row 属性来指定网格元素的位置和尺寸。
1. 定义栅格束和网格容器
首先，我们需要定义网格容器和栅格束。假设我们有一个包含 3 个栅格束的网格容器，其中第一栅格束（顶部）高度为 100px，另外两个栅格束的高度自适应，并且容器的宽度为 900px。我们可以使用以下代码来定义网格容器和栅格束：
----- -
-------- -----
------ ------
------- - -----
------------------- ----- ---- -----
---------------------- ---------- -----
--------------------
------- ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ -------
-------- ------- ------- ------- ------- ------- ------- ------- ------- ------- ------- --------
------- ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ --------
-
------- -
---------- -------
-
-------- -
---------- --------
-
-------- -
---------- --------
-
------- -
---------- -------
-在上面的代码中，我们使用 grid-template-rows 属性定义了网格容器和三个栅格束的行高，第一行的高度为 100px，其余两行的高度自适应；使用 grid-template-columns 属性定义网格容器的列数和列宽，这里我们将宽度平均分成了 12 列；使用 grid-template-areas 属性定义网格容器中每个区域的名称，以便后续指定网格元素的位置和尺寸；最后，我们分别定义了四个网格元素，并使用 grid-area 属性将它们分别放置在对应的栅格束中。
2. 指定网格元素的位置和尺寸
现在，我们已经成功地将四个网格元素放置到了对应的栅格束中，接下来，我们需要使用 grid-column 和 grid-row 属性来指定它们的位置和尺寸。
例如，如果我们要将 .sidebar 这个网格元素放置到第 2 列、第 2 行到第 4 行的区域，可以使用以下代码：
-------- - ------------ - - ---- -- --------- - - ---- -- -
其中，grid-column 属性指定了网格元素放置的列数范围，2 / span 1 表示从第 2 列开始，跨越 1 列；grid-row 属性指定了网格元素放置的行数范围，2 / span 2 表示从第 2 行开始，跨越 2 行。
3. 实现自适应宽度和固定高度
接下来，我们将介绍如何实现自适应宽度和固定高度。假设我们要将 .content 这个网格元素的高度固定为 400px，宽度自适应，我们可以使用以下代码：
-------- - ---------- -------- ------- ------ -
在上面的代码中，我们首先使用 grid-area 属性将网格元素放置到指定的栅格束中，然后使用 height 属性将其高度指定为 400px。由于未指定其宽度，因此宽度将自适应父容器的宽度。
4. 完整示例代码
最后，这里给出完整的示例代码，你可以对照着这个例子来理解如何实现自适应和固定高度的栅格束布局。
--------- -----
------
------
----- ----------------
---------- ---- ---------------
-------
----- -
-------- -----
------ ------
------- - -----
------------------- ----- ---- -----
---------------------- ---------- -----
--------------------
------- ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ -------
-------- ------- ------- ------- ------- ------- ------- ------- ------- ------- ------- --------
------- ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ --------
-
------- -
---------- -------
----------------- -----
-
-------- -
---------- --------
----------------- -----
-
-------- -
---------- --------
------- ------
----------------- -----
-
------- -
---------- -------
----------------- -----
-
--------
-------
------
---- -------------
---- ---------------------------
---- -----------------------------
---- -----------------------------
---- ---------------------------
------
-------
-------四、总结
通过本文的介绍，相信你已经掌握了如何使用 CSS Grid 来实现自适应和固定高度的栅格束布局了。在实践过程中，你还可以进一步探究 CSS Grid 提供的其他属性和方法，以实现更加灵活和多样化的布局。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64666ef0968c7c53b06fd31d