grid-column

尝试一下

grid-column: 1;

grid-column: 1 / 3;

grid-column: 2 / -1;

grid-column: 1 / span 2;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">One</div>
    <div>Two</div>
    <div>Three</div>
  </div>
</section>

.example-container {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  grid-template-rows: repeat(3, minmax(40px, auto));
  grid-gap: 10px;
  width: 200px;
}

.example-container > div {
  background-color: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
}

#example-element {
  background-color: rgba(255, 0, 200, 0.2);
  border: 3px solid rebeccapurple;
}

语法

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

每个<grid-line>值可以指定为：

• 要么是auto关键字
• 或<custom-ident>值
• 或<integer>值
• 或者<custom-ident>和<integer>，两者之间用空格分隔
• 或关键字 span 与<custom-ident>或<integer>或两者一起使用。

值

auto

是一个关键字，指示该属性对网格项目的放置没有任何作用，表示自动放置，自动跨度或默认跨度为 1。

<custom-ident>

如果有一个名为"<custom-ident>-start"/"<custom-ident>-start"的命名行，则它将第一行添加到网格项目的位置。

否则，将其视为与<custom-ident>一起指定了整数 1。

<integer> && <custom-ident>?

将第 n 条网格线贡献到网格项目的位置。如果给定一个负整数，则从显式网格的末端开始，反向计数。

如果将名称指定为<custom-ident>，则仅计算具有该名称的行。如果没有足够多的具有该名称的线，则假定所有隐式网格线都具有该名称，以查找该位置。

<integer>的值为0无效。

span && [ <integer> || <custom-ident> ] 将网格范围扩展到该网格项目的位置，以使该网格项目的网格区域的相应边缘距离相对边缘 n 行。 如果将名称指定为<custom-ident>，则仅计算具有该名称的行。如果没有足够多的具有该名称的线，则为计算此跨度，假定与搜索方向相对应的显式网格侧的所有隐式网格线均具有该名称。

如果省略<integer>，则默认为1。负整数或 0 无效。

形式语法

grid-column = 
  <grid-line> [ / <grid-line> ]?  

<grid-line> = 
  auto                                                |
  <custom-ident>                                      |
  [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ]  |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]   

示例

HTML

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

CSS

#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;
}

IE 问题

IE11 不支持自动放置网格项目。除非用-ms-grid-column和-ms-grid-row显式注释，否则所有项目都以网格的第一行/列结尾。可以使用一些 JavaScript 来启用自动注释：源存储库。

规范

浏览器兼容性

参见

• Related CSS properties: grid-row, grid-row-start, grid-row-end, grid-column-start, grid-column-end
• Grid Layout Guide: Line-based placement with CSS Grid
• Video tutorial: Line-based placement