CSS - grid-column 属性

CSS grid-column 是一个简写属性，用于通过指定行、跨度或依靠自动放置来控制网格项在网格容器中列方向上的放置。它是以下各个网格相关属性的简写：grid-column-start 和 grid-column-end

语法

grid-column: auto | grid-column-start / grid-column-end;

属性值

值	描述
auto	元素的大小取决于内容或可用空间。
grid-column-start	它指定网格项在网格列中的起始位置。
grid-column-end	它指定在哪个列线停止显示项目或跨越多少列。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS 网格列属性示例

以下示例使用不同的值解释了grid-column 属性。

使用 Auto 值的网格列属性

要让网格元素的大小根据其内容或可用空间自动确定，我们使用auto 值。它允许网格项根据其内容调整自身大小或适合可用网格空间。这在以下示例中显示。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 10px;
         padding: 10px;
         background-color: #f0f0f0;
      }

      .grid-item {
         background-color: lightcoral;
         border: 3px solid blue;
         padding: 20px;
         text-align: center;
         color: white;
         grid-column: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-column property
   </h2>
   <h4>
      grid-column: auto
   </h4>
   <div class="grid-container">
      <div class="grid-item">
         Item 1
      </div>
      <div class="grid-item">
         Item 2
      </div>
      <div class="grid-item">
         Item 3
      </div>
      <div class="grid-item">
         Item 4
      </div>
      <div class="grid-item">
         Item 5
      </div>
   </div>
</body>

</html>

使用整数值的网格列属性

要根据网格容器的列数确定网格元素的大小，我们指定起始列号和结束列号。根据指定的值，元素的大小将进行调整。这在以下示例中显示。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 10px;
         padding: 10px;
         background-color: #f0f0f0;
      }

      .grid-item {
         background-color: lightcoral;
         border: 2px solid #ff6b6b;
         padding: 20px;
         text-align: center;
         color: white;
      }
      .items{
         border: 3px solid blue;
      }

      .item1 {
         grid-column: 1 / 3;
      }

      .item2 {
         grid-column: 2 / 4;
      }

      .item5 {
         grid-column: 2 / 5;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-column property
   </h2>
   <h4>
      grid-column: 1 / 3 (item1),
      2/4 (item2), 2/5 (item5)
   </h4>
   <p>
      item1- starts at column 1
      and ends at column 2
   </p>
   <p>
      item2- starts at column 2
      and ends at column 3
   </p>
   <p>
      item5- starts at column 2
      and ends at column 4
   </p>
   <div class="grid-container">
      <div class="grid-item item1 items">
         Item 1
      </div>
      <div class="grid-item item2 items">
         Item 2
      </div>
      <div class="grid-item">
         Item 3
      </div>
      <div class="grid-item">
         Item 4
      </div>
      <div class="grid-item item5 items">
         Item 5
      </div>
   </div>
</body>

</html>

使用跨度值的网格列属性

要确定网格元素的大小，我们可以使用跨度指定它将占据的列数空间（例如，span 2 元素将占用 2 列空间）。这在以下示例中显示。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>

   <style>
      .grid-container {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 10px;
         padding: 10px;
         background-color: #f0f0f0;
      }

      .grid-item {
         background-color: lightcoral;
         border: 2px solid #ff6b6b;
         padding: 20px;
         text-align: center;
         color: white;
      }
      .items{
         border: 3px solid blue;
      }

      .item1 {
         grid-column: span 3;
      }

      .item2 {
         grid-column: 2 / span 3;
      }

      .item5 {
         grid-column: 1 / span 4;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-column property
   </h2>
   <h4>
      grid-column:span 3 (item1), 
      2 / span 3 (item2), 1 / span 4 (item5)
   </h4>
   <p>
      item1- starts at column 1
      and spans 3 columns
   </p>
   <p>
      item2- starts at column 2
      and spans 3 columns
   </p>
   <p>
      item5- starts at column 1
      and spans 4 columns
   </p>
   <div class="grid-container">
      <div class="grid-item item1 items">
         Item 1
      </div>
      <div class="grid-item item2 items">
         Item 2
      </div>
      <div class="grid-item">
         Item 3
      </div>
      <div class="grid-item">
         Item 4
      </div>
      <div class="grid-item item5 items">
         Item 5
      </div>
   </div>
</body>

</html>

支持的浏览器

属性
grid-column	57	16	52	10	44

css_properties_reference.htm

打印页面