grid-template-rows

描述

grid-template-rows 属性确定网格布局中行的数量、名称和大小。为了设置网格布局中列（轨道）的数量、名称和大小，可以使用 grid-template-columns 属性。

效果展示

语法

grid-template-rows:
  none | <track-list> | <auto-track-list>
  where
  <track-list> = [ <line-names>? [ <track-size> | <track-repeat>]] + <line-names>?
  <auto-track-list> = [ <line-names>? [ <fixed-size> | <fixed-repeat>]] * <line-names>? <auto-repeat>
  [ <line-names>? [ <fixed-size> | <fixed-repeat>]] * <line-names>?
  where
  <line-names> = "[" <custom-ident> * "]"
  <track-size> = <track-breadth> | minmax(<inflexible-breadth>, <track-breadth>)
  | fit-content([ <length> | <percentage>])
  <track-repeat> = repeat(
    [ <positive-integer>],
    [ <line-names>? <track-size>] + <line-names>?
  )
  <fixed-size> = <fixed-breadth> | minmax(<fixed-breadth>, <track-breadth>) | minmax(
    <inflexible-breadth>,
    <fixed-breadth>
  )
  <fixed-repeat> = repeat(
    [ <positive-integer>],
    [ <line-names>? <fixed-size>] + <line-names>?
  )
  <auto-repeat> = repeat(
    [ auto-fill | auto-fit],
    [ <line-names>? <fixed-size>] + <line-names>?
  )
  where
  <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
  <inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto
  <fixed-breadth> = <length-percentage>
  where
  <length-percentage> = <length> | <percentage>;

值

• none 一个关键字，表示不创建显式布局网格。任何列都将隐式生成，并且它们的大小将使用 grid-auto-columns 属性确定。这是默认值。
• length / percentage 使用有效长度值或百分比值指定列的大小。该值必须为正。
• flex “灵活”测量单位 fr（小数单位）中的非负值。每列按给定系数的比例占据布局网格容器中剩余空间的一部分。例如，当使用值 1fr 2fr 时，列将分别占用剩余空间的 ⅓ 和 ⅔。从可用空间中减去此类行或列的总大小，从而得出剩余空间，然后将其按照系数的比例在灵活大小的行和列之间分配。 0fr 和 1fr 之间的值有一些特殊的行为，当系数之和小于 1 时，它们将占用不到 100%的剩余空间。当可用空间无限时（布局网格容器的宽度或高度未定义），灵活网格列的大小由其内容决定，同时保持适当的比例。
• max-content 根据列中最大项目设置每列大小的关键字。
• min-content 根据列中最小项目设置每列大小的关键字。
• minmax (min, max) 定义大于或等于 min 且小于或等于 max 的大小范围的函数符号。如果 max 小于 min ，则忽略 max ，并且该函数被视为 min 。 “灵活”测量单位的值作为最大值设置了色谱柱的灵活性系数，这对于确定最小值是不可接受的。
• auto 列的大小由容器的大小和列中元素内容的大小决定。作为最大值，它与 max-content 的值相同，但至少它代表最大的最小大小。可以使用 align-content 属性和 justify-content 来拉伸自动列大小。
• fit-content (length | percentage) 这是公式 min(max-content, max(auto, argument)) ，与 auto 类推计算（即 minmax(auto, max-content) ），只不过列的大小被钳位参数值（如果大于自动最小值）。
• repeat ([positive-integer | auto-fill | auto-fit], track-list) 表示轨道列表的重复片段，允许以更紧凑的形式写入大量表现出重复模式的列。