align

描述

grid-template 属性确定网格布局中列和行的数量、名称和宽度，设置网格布局模板，引用使用 grid-area 属性设置的元素区域的名称。它是以下属性的简写属性：grid-template-rows、grid-template-columns 和 grid-template-areas。

效果展示

语法

grid-template:
  none | [ <grid-template-rows> / <grid-template-columns>] | [ <line-names>? <string> <track-size>? <line-names>?] + [ / <explicit-track-list>]?
  where
  <line-names> = "[" <custom-ident> * "]"
  <track-size> = <track-breadth> | minmax(<inflexible-breadth>, <track-breadth>)
  | fit-content([ <length> | <percentage>])
  <explicit-track-list> = [ <line-names>? <track-size>] + <line-names>?
  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>;

值

• none 是将所有三个普通属性设置为 none 的关键字，这意味着没有显式网格。没有命名的网格区域。行和列将隐式生成；它们的大小将由 grid-auto-rows 和 grid-auto-columns 属性决定。
• <grid-template-rows> / <grid-template-columns> 将 grid-template-rows 和 grid-template-columns 设置为指定值，并将 grid-template-areas 设置为 none。
• [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]? 将 grid-template-areas 设置为列出的字符串，将 grid-template-rows 设置为每个字符串后面的轨道大小（对于任何缺失的大小填写 auto），并拼接在每个大小之前/之后定义的命名行以及 grid-template - 斜杠后指定的曲目列表的列（如果未指定，则无）。