grid-column

版本： CSS3

grid-column CSS属性是网格列开始和网格列结束的速记属性，它通过为网格的放置提供一条线、一个跨距或无任何内容（自动）来指定网格项在网格列中的大小和位置，从而指定其网格区域的内联开始和内联结束边缘。

示例

grid-column: 1;
grid-column: 1 / 3;
grid-column: 2 / -1;
grid-column: 1 / span 2;

浏览器支持

IE不支持 grid-column ，其余浏览器都支持 grid-column

语法

grid-column : auto |<custom-ident>|[<integer>&&<custom-ident>?]|[ span &&[<integer>||<custom-ident>]]

取值

• auto ：是一个关键字，指示属性对网格项的放置没有任何贡献，表示自动放置、自动范围或默认范围1。
• <custom-ident> ：如果有一个名为'<custom-ident>-start'/'<custom-ident>-end'的命名行，它将第一个这样的行贡献给网格项的位置。
• <integer>&&<custom-ident>? ：将第n条网格线贡献给网格项的位置。如果给定一个负整数，则它将从显式网格的结束边缘开始反向计数。如果名称以<custom-ident>形式给出，则只计算具有该名称的行。如果没有足够多的具有该名称的线，则假定所有隐式轴网线都具有该名称，以便查找此位置。
• span &&[<integer>||<custom-ident> ：为网格项的放置提供网格跨距，以便网格项的网格区域的对应边与相对边的距离为n行。如果名称以<custom-ident>形式给出，则只计算具有该名称的行。如果没有足够多的具有该名称的线，则假定与搜索方向相对应的显式栅格边上的所有隐式栅格线都具有该名称，以便计算此跨距。如果省略<integer>，则默认为1。负整数或0无效。

实例

#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 100px;
}

#item1 {
  background-color: lime;
}

#item2 {
  background-color: yellow;
  grid-column: 2 / 4;
}

#item3 {
  background-color: blue;
  grid-column: span 2 / 7;
}


<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>