span && [ <integer> || <custom-ident> ]为网格项的位置提供网格跨度;这样,网格项的网格区域的行开始边缘是从结束边缘开始的n行。 如果名称被指定为<custom-ident>,只有具有该名称的行才会被计算在内。如果没有足够的名称行存在,则显式网格一侧的所有隐式网格线,对应于搜索方向,都假定具有该名称,以便计算此...
/* Keyword value */grid-row-start: auto; /* <custom-ident> values */ grid-row-start: somegridarea; /* <integer> + <custom-ident> values */ grid-row-start: 2; grid-row-start: somegridarea 4; /* span + <integer> + <custom-ident> values */ grid-row-start: span 3; grid-ro...
或关键字span连同一个<custom-ident>或一个<integer>或两个。 取值 auto是一个关键字,指示该属性对网格项目的放置没有任何贡献,表示自动放置,自动跨度或默认跨度1。<custom-ident>如果有一个名为“<custom-ident> -start”的命名行,它会将第一个这样的行添加到网格项的位置。
col-span-9 grid-column: span 9/span 9 col-span-10 grid-column: span 10/span 10 col-span-11 grid-column: span 11/span 1 col-span-12 grid-column: span 12/span 12 col-span-full grid-column: 1/-1 col-start-1 grid-column-start: 1 col-start-2 grid-column-start: 2 col-start-...
row-span-1grid-row:span 1 / span 1; row-span-2grid-row:span 2 / span 2; row-span-3grid-row:span 3 / span 3; row-span-4grid-row:span 4 / span 4; row-span-5grid-row:span 5 / span 5; row-span-6grid-row:span 6 / span 6; ...
/* span + <integer> + <custom-ident> values */ grid-row-start: span 3; grid-row-start: span main; grid-row-start: span myarea 5; /* Global values */ grid-row-start: inherit; grid-row-start: initial; /* same as `auto` */ grid-row-start: revert; grid-row-start: revert-la...
For example,grid-column-end: span 2indicates the second grid line in the endward direction from thegrid-column-startline. If a name is given as acustom-ident, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the ...
/* <integer> + <custom-ident> values */ grid-row-start: 2; grid-row-start: somegridarea 4; /* span + <integer> + <custom-ident> values */ grid-row-start: span 3; grid-row-start: span somegridarea; grid-row-start: 5 somegridarea span; /* Global values */ grid-row-start:...
当使用span 2时，元素不再被锁定到给定的行，因此它像所有项目一样属于步骤（4），我们遵循文档顺序...
The CSSgrid-row-startproperty defines the start of the item inside of the grid row, adding a span, a line or nothing to its grid location and specifies the inline-start side of the grid are of the item. This property is a part of thegrid-rowshorthand property. ...