grid-auto-rows

描述

该 grid-auto-rows 属性设置布局网格容器中隐式创建的行的大小。此属性仅影响未显式设置大小的行。若要设置布局网格容器中隐式创建的列的大小，可以使用 grid-auto-columns 属性。

效果展示

语法

grid-auto-rows: <track-size> + where <track-size> = <track-breadth> | minmax(
    <inflexible-breadth>,
    <track-breadth>
  ) | fit-content([ <length> | <percentage>]) where <track-breadth> =
  <length-percentage> | <flex> | min-content | max-content | auto
  <inflexible-breadth> = <length> | <percentage> | min-content | max-content |
  auto where <length-percentage> = <length> | <percentage>;

值

• auto 行的大小由容器的大小和行中元素内容的大小决定。作为最大值，它与最大含量的值相同，但至少它代表了最大的最小大小。可以使用 align-content 属性和 justify-content 来拉伸自动行大小。这是默认值。
• length / percentage 使用有效的长度值或百分比值指定隐式创建的行的大小。该值必须为正数。
• flex “灵活”度量单位 fr（分数单位）中的非负值。每个隐式创建的列按指定系数的比例占用布局网格容器中剩余空间的一部分。例如，当使用值 1fr 2fr 时，隐式创建的列将分别占用剩余空间的 1/3 和 2/3。从可用空间中减去此类行或列的总大小，从而得到剩余空间，然后将其按其系数的比例在灵活大小的行和列之间划分。0fr 到 1fr 之间的值具有一些特殊行为，当系数之和小于 1 时，它们将占用不到 100% 的剩余空间。当可用空间无限（布局网格容器的宽度或高度未定义）时，灵活网格列的大小由其内容确定，同时保持适当的比例。
• max-content 一个关键字，它根据行中最大的项设置每行的大小。
• min-content 一个关键字，它根据行中的最小项设置每行的大小。
• minmax (min, max) 函数表示法，用于定义大于或等于 min 且小于或等于 max 的大小范围。如果 max 小于 min ，则忽略 max，并将函数视为 min 。以“柔性”计量单位中的值作为最大值设置行的柔性系数，这对于确定最小值是不可接受的。
• fit-content (length | percentage) 这是公式 min（max-content， max （auto， argument）），它是通过类比 auto （即 minmax（auto， max-content）） 计算的，只是行的大小被参数值夹住，如果它大于自动最小值。