前言
网页布局是前端工作中不可避免的一个环节，在有限的空间中展示更多的内容是我们一直在探索的方向，而 CSS Grid 布局可以帮助我们实现更灵活的网页布局方式。通过本文，你将了解如何使用 CSS Grid 布局实现多行等高网格布局。
相关概念
CSS Grid 布局是一个二维布局模型，可以将页面分为行和列来进行布局设计，具有以下概念：
网格轨道(Grid Track)：一个轨道可以是行轨道(Row Track)或列轨道(Column Track)，他们分别代表着网格布局中的行和列。
网格单元(Grid Cell)：单元格是网格的一个方框，它由四个线条包围而成，其中后两个线条是网格的行和列。
网格线(Grid Line)：网格线是由网格轨道组成的，它可以是水平或垂直的线。
网格区域(Grid Area)：由网格线定义的区域，通常由多个单元格组成。
实现多行等高网格布局
HTML 结构
首先，我们需要创建一个包含多个网格子元素的容器，每个子元素中包含一个文本展示区域和一个图片展示区域，具体 HTML 结构如下：
-- -------------------- ---- ------- ---- ------------------ ---- ------------------ ---- ----------------- ------- ---- -------------------- ------------------------- ------ --- ---- ------------------ ---- ----------------- ------- ---- -------------------- ------------------------- ------ ------展开代码
CSS 样式
接下来，我们需要创建一个多行等高的网格布局，可以采用以下 CSS 样式：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- ----------------- ------------- ------ --------------- ---- --------- ----- - ---------- - -------- ----- --------------- ------- - -- ---- -- -------- - ------------ -- - -- ---- -- ----- - ---------- -- -------- ----- --------------- ------- ---------------- ------- -展开代码
通过上述样式，我们可以实现一个多行等高的网格布局，以下是样式解释：
.container部分表示容器的固定样式，其中display: grid代表创建一个网格布局，grid-template-columns代表列的数量和宽度，grid-auto-rows代表行的高度，grid-gap代表间隔大小。.grid-item部分表示每个网格子元素的样式，其中display: flex代表创建一个弹性布局（即子元素将固定在容器内），flex-direction: column代表子元素垂直排列。.picture部分表示图片区域的样式，其中flex-shrink: 0代表图片区域不可缩小。.text部分表示文本区域的样式，其中flex-grow: 1代表文本区域可展开，.text内部还包含了一个弹性布局，用于使文本内容以中央展示的方式呈现。
示例代码
在本示例中，我们将会创建一个多行等高的网格布局。每个网格子元素内部包含了一个文本和图片区域，其中文本区域作为主体展示区域，图片区域用于展示补充信息。
HTML 结构如下：
-- -------------------- ---- ------- ---- ------------------ ---- ------------------ ---- ----------------- ------- ---- -------------------- ------------------------- ------ ---- ------------------ ---- ----------------- ------- ---- -------------------- ------------------------- ------ ---- ------------------ ---- ----------------- ------- ---- -------------------- ------------------------- ------ --- ---- ------------------ ---- ----------------- ------- ---- -------------------- ------------------------- ------ ------展开代码
CSS 样式如下：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- ----------------- ------------- ------ --------------- ---- --------- ----- - ---------- - -------- ----- --------------- ------- - -- ---- -- -------- - ------------ -- - -- ---- -- ----- - ---------- -- -------- ----- --------------- ------- ---------------- ------- -展开代码
通过以上代码，我们就可以轻松地创建一个多行等高的网格布局，使页面更加灵活且美观。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67937a0d504e4ea9bd7be756
