CSS Grid 中如何调整网格行高

阅读时长 4 分钟读完

在 CSS Grid 中,可以用 grid-template-rows 属性来定义网格的行高。grid-template-rows 可以接受一个由行高值组成的列表,每个值表示一个网格行的高度,如下所示:

上面的示例中,.container 是一个 CSS Grid 容器,它包含三个网格行,分别为 100 像素高度、200 像素高度和 300 像素高度。

行高的单位

grid-template-rows 中,可以使用任何 CSS 长度单位来指定行高,比如像素(px)、百分比(%)、视口宽度(vw)等等。此外,还可以使用 fr 单位,它表示剩余空间的的一个分数,具体含义将在下面的内容中讲解。

等分行高

如果想让容器中的所有行等分,可以使用 repeat() 函数,如下所示:

上面的示例中,.container 包含三个等高的网格行,每行高度占用剩余可用空间的 1/3。

自适应行高

使用上面介绍的方法可以精确地定义行高,但是在某些情况下,可能需要让行高自适应内容。

CSS Grid 中有两种方法可以实现自适应行高。第一种方法是使用 auto 关键字,如下所示:

上面的示例中,容器中的所有行高度将自适应其内容。

第二种方法是使用 minmax() 函数,如下所示:

上面的示例中,容器中的每行都有最小高度限制,并且高度可以自适应其内容。

行高的属性继承

注意,网格行的高度值并不会继承到其内容区域中。比如,下面的示例中,第一行的高度为 100 像素,但是其内容的高度超过了 100 像素,因此内容会被截断:

-- -------------------- ---- -------
---------- -
  -------- -----
  ------------------- ----- -----
-

---- -
  ------- --- ----- ------
  ------- ------
-

为了让网格行的高度值也能应用于其中的内容,可以使用 align-items 属性,将内容垂直居中对齐:

-- -------------------- ---- -------
---------- -
  -------- -----
  ------------------- ----- -----
  ------------ -------
-

---- -
  ------- --- ----- ------
  ------- ------
-

上面的示例中,.container 的子元素 .box 等高,且垂直居中对齐。

结论

在 CSS Grid 中,可以用 grid-template-rows 属性来定义网格的行高。你可以使用像素、百分比、视口单位或 fr 单位来指定行高,也可以使用 auto 关键字或 minmax() 函数来实现自适应行高。注意,网格行的高度值并不会继承到其中的内容区域中,如果需要继承,请使用 align-items 属性垂直居中对齐内容。

示例代码

-- -------------------- ---- -------
---- ------------------
  ---- --------------- -------
  ---- --------------- -------
------

-------
---------- -
  -------- -----
  ------------------- ----- -----
  ------------ -------
-

---- -
  ------- --- ----- ------
  ------- ------
-
--------

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/670f74625f551281026492f7

纠错
反馈