DevShelf

Appearance

grid-column ​

描述 ​

该 grid-column 属性控制网格项在网格区域中的位置，特别是网格位置和网格范围。在单个声明中设置网格列开始和网格列结束的简写。

效果展示 ​

语法 ​

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

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

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

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

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

值 ​

  • auto 是一个关键字，指示该属性对网格项的放置没有任何贡献，指示自动放置、自动跨度或默认跨度1。
  • <custom-ident> 如果存在名为<custom-ident>-start/的命名行<custom-ident>-end，则会将第一条此类行贡献给网格项的放置。

::: waining 注意 命名网格区域会自动生成这种形式的隐式命名线，因此指定grid-column: foo;将选择该命名网格区域的开始/结束边缘（除非在其之前显式指定了另一条名为foo-start/的线）。foo-end 否则，这将被视为整数1已与 一起指定<custom-ident>。 :::

  • <integer> && <custom-ident>? 将第 n 条网格线贡献给网格项的位置。如果给出负整数，则从显式网格的结束边缘开始反向计数。 如果名称指定为 a <custom-ident>，则仅计算具有该名称的行。如果没有足够的具有该名称的线，则假定所有隐式网格线都具有该名称，以便查找该位置。 ``的值无效0。

  • span && [ <integer> || <custom-ident> ] 为网格项的放置提供网格跨度，使得网格项的网格区域的相应边缘距相对边缘 n 行。 如果名称指定为 a <custom-ident>，则仅计算具有该名称的行。如果不存在足够多的具有该名称的线，则假定与搜索方向相对应的显式网格一侧的所有隐式网格线都具有该名称，以便计算该跨度。 如果<integer>省略，则默认为1。负整数或 0 无效。