CSS 属性

CSS grid-column 是一个简写属性，用于通过指定行、跨度或依赖自动放置来控制网格容器内网格项在列方向上的放置。它定义网格区域的内联开始和内联结束边缘。

grid-column 属性是以下各个网格相关属性的简写:

属性值

  • auto: 它自动确定网格布局中网格项的位置或默认为 1 的跨度。

  • <custom -ident>: 如果有一条线标记为"<custom-ident>-start"或"<custom-ident>-end"，则网格项将沿着该线定位。

    • 使用命名网格时区域，创建隐式线。网格列:foo；指定命名区域的开始/结束边界，除非通过 foo-start/foo-end 等行明确指定。

  • <integer> && <custom-ident>? − 如果给出了名称，则仅考虑具有该名称的行。如果具有该名称的线不足，则所有网格线都会按具有该名称的方式进行处理，以确定正确的位置。 <integer> 值为 0 无效。

  • span && [ <integer> || <custom-ident> ]: 当名称被指定为自定义标识时，仅考虑具有该名称的行。如果具有该名称的行不足，我们会考虑网格相关侧的所有网格线都具有该名称计数目的。如果未指定 <integer>，则默认值为 1。不允许使用负数或 0。

适用范围

网格项和绝对-包含块是网格容器的定位框。

DOM 语法

object.style.gridColumn = "auto|<custom-ident>|<integer> && <custom-ident>?|span && [ <integer> || <custom-ident> ]";

CSS grid-column: auto 

以下示例演示了 grid-column: auto 属性允许网格项根据其内容自动确定其列大小 -

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 100px);
      color: white;
      text-align: center;
      background-color: lightgreen;
   }
   .grid-container > div {
      background-color: red;
      margin: 5px;
      padding: 5px;
   }
   .grid-item2 {
      grid-column: auto;
   }     
</style>
</head>
<body>
   <div class="grid-container">
      <div >Grid item 1</div>
      <div class="grid-item2">Grid Auto item 2</div>
      <div>Grid item 3</div>
      <div>Grid item 4</div>
      <div>Grid item 5</div>
      <div>Grid item 6</div>
   </div>
</body>
</html>

CSS grid-column: <custom-ident>

以下示例设置 grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr;具有名为 col1-start、col2-start 和 col3-start 的三列的属性。

grid-column:col3-start 属性将第四个网格项放置在网格的第三列中 -

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr;
      grid-template-rows: auto;
      gap: 10px;
      background-color: lightgreen;
      padding: 5px;
   }
   .grid-container > div {
      background-color: red;
      padding: 10px;
      text-align: center;
   }
   .grid-item {
      grid-column: col3-start; 
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div>Grid Item 1</div>
      <div >Grid Item 2</div>
      <div>Grid Item 3</div>
      <div class="grid-item">Grid Item 4</div>
   </div>
</body>
</html>

CSS grid-column: <integer> && <custom-ident>?

以下示例设置 grid-template-columns: [a] 1fr [b] 1fr [a] 1fr [a];属性创建名为 a 和 b 的三列。

grid-column: 2 a;属性，表示第二个网格项从第二个名为"a"的行开始，即第三条网格线。

下图演示了带有行的列布局:

CSS grid grid-column

这里是示例 -

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid-template-columns: [a] 1fr [b] 1fr [a] 1fr [a];
      grid-template-rows: auto;
      background-color: lightgreen;
      padding: 5px;
   }
   .grid-container > div {
      background-color: red;
      border: 2px solid blue;
      padding: 10px;
      text-align: center;
   }
   .grid-item {
      grid-column: 2 a; 
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div>Grid Item 1</div>
      <div class="grid-item">Grid Item 2</div>
      <div>Grid Item 3</div>
      <div>Grid Item 4</div>
   </div>
</body>
</html>

CSS grid-column: span 

以下示例演示了 grid-column: 2 / span 2 属性指定第二个网格项从第二列开始并跨越两列 -

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      width: 360px;
      color: white;
      text-align: center;
      background-color: lightgreen;
   }
   .grid-container > div {
      background-color: red;
      margin: 5px;
      padding: 5px;
   }
   .grid-item2 {
      grid-column:  2 / span 2;
   }   
</style>
</head>
<body>
   <div class="grid-container">
      <div >Grid item 1</div>
      <div class="grid-item2">Grid item 2</div>
      <div>Grid item 3</div>
      <div>Grid item 4</div>
      <div>Grid item 5</div>
   </div>
</body>
</html>

CSS grid-column: 相关属性

以下是与 grid-column 属性相关的 CSS 属性列表:

属性值
grid-column-start定义网格列中网格项的起始位置。
grid-column-end确定网格项应位于的列结束。