Skip to content

grid-column

<https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-column>

grid-column CSS 属性是 grid-column-start (en-US) 和 grid-column-end (en-US) 的简写属性,用于指定网格项目的大小和位置 通过为它的网格位置贡献线条,跨度或不添加任何内容(自动),从而指定其 grid area。

语法

如果给出两个&lt;grid-line>值,它们之间用“ /”分隔。将 grid-column-start 的正手设置为斜线之前的值,并将 grid-column-end 的正手设置为斜线之后的值。

每个&lt;grid-line>值可以指定为:

  • 要么是 auto 关键字
  • &lt;custom-ident>
  • &lt;integer>
  • 或者&lt;custom-ident>&lt;integer>,两者之间用空格分隔
  • 或关键字 span 与&lt;custom-ident>&lt;integer>或两者一起使用。

用法

ClassProperties
col-autogrid-column: auto;
col-span-1grid-column: span 1 / span 1;
col-span-2grid-column: span 2 / span 2;
col-span-3grid-column: span 3 / span 3;
col-span-4grid-column: span 4 / span 4;
col-span-5grid-column: span 5 / span 5;
col-span-6grid-column: span 6 / span 6;
col-span-7grid-column: span 7 / span 7;
col-span-8grid-column: span 8 / span 8;
col-span-9grid-column: span 9 / span 9;
col-span-10grid-column: span 10 / span 10;
col-span-11grid-column: span 11 / span 11;
col-span-12grid-column: span 12 / span 12;
col-span-fullgrid-column: 1 / -1;
col-start-1grid-column-start: 1;
col-start-2grid-column-start: 2;
col-start-3grid-column-start: 3;
col-start-4grid-column-start: 4;
col-start-5grid-column-start: 5;
col-start-6grid-column-start: 6;
col-start-7grid-column-start: 7;
col-start-8grid-column-start: 8;
col-start-9grid-column-start: 9;
col-start-10grid-column-start: 10;
col-start-11grid-column-start: 11;
col-start-12grid-column-start: 12;
col-start-13grid-column-start: 13;
col-start-autogrid-column-start: auto;
col-end-1grid-column-end: 1;
col-end-2grid-column-end: 2;
col-end-3grid-column-end: 3;
col-end-4grid-column-end: 4;
col-end-5grid-column-end: 5;
col-end-6grid-column-end: 6;
col-end-7grid-column-end: 7;
col-end-8grid-column-end: 8;
col-end-9grid-column-end: 9;
col-end-10grid-column-end: 10;
col-end-11grid-column-end: 11;
col-end-12grid-column-end: 12;
col-end-13grid-column-end: 13;
col-end-autogrid-column-end: auto;

共 20 个模块,1301 篇 Markdown 文档。