DevShelf

Appearance

grid-row ​

描述 ​

grid-row 属性获取或设置一个值，该值指示 Grid 中的元素应出现在哪一行。在单个声明中设置 grid-row-start 和 grid-row-end 的简写。

效果展示 ​

语法 ​

css
/* Keyword values */
grid-row: auto;
grid-row: auto / auto;

/* <custom-ident> values */
grid-row: somegridarea;
grid-row: somegridarea / someothergridarea;

/* <integer> + <custom-ident> values */
grid-row: somegridarea 4;
grid-row: 4 somegridarea / 6;

/* span + <integer> + <custom-ident> values */
grid-row: span 3;
grid-row: span somegridarea;
grid-row: 5 somegridarea span;
grid-row: span 3 / 6;
grid-row: span somegridarea / span someothergridarea;
grid-row: 5 somegridarea span / 2 span;

/* Global values */
grid-row: inherit;
grid-row: initial;
grid-row: revert;
grid-row: revert-layer;
grid-row: unset;

值 ​

  • auto 是一个关键字，指示该属性对网格项的放置没有任何贡献，指示自动放置、自动跨度或默认跨度 1 。
  • <custom-ident> 如果存在名为 <custom-ident>-start / <custom-ident>-end 的命名行，它将为网格项的位置贡献第一条此类行。否则，这将被视为整数 1 已与 <custom-ident> 一起指定。 注意：命名网格区域会自动生成这种形式的隐式命名线，因此指定 grid-row: foo; 将选择该命名网格区域的开始/结束边缘（除非另一条名为 foo-start / foo-end 之前已明确指定）。
  • <integer> && <custom-ident>? 将第 n 条网格线贡献给网格项的位置。如果给出负整数，则从显式网格的结束边缘开始反向计数。如果名称以 <custom-ident> 形式给出，则仅计算具有该名称的行。如果没有足够的具有该名称的线，则假定所有隐式网格线都具有该名称，以便查找该位置。0 的 <integer> 值无效。
  • span && [ <integer> || <custom-ident> ] 为网格项的放置提供网格跨度，使得网格项的网格区域的相应边缘距相对边缘 n 行。如果名称以 <custom-ident> 形式给出，则仅计算具有该名称的行。如果不存在足够多的具有该名称的线，则假定与搜索方向相对应的显式网格一侧的所有隐式网格线都具有该名称，以便计算该跨度。如果省略 <integer> ，则默认为 1 。负整数或 0 无效。