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	它指定在哪個列線停止顯示專案或跨越多少列。

CSS 網格列屬性示例

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

使用 Auto 值的網格列屬性

要讓網格元素的大小根據其內容或可用空間自動確定，我們使用auto 值。它允許網格項根據其內容調整自身大小或適合可用網格空間。這在以下示例中顯示。

示例

<!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>

使用整數值的網格列屬性

要根據網格容器的列數確定網格元素的大小，我們指定起始列號和結束列號。根據指定的值，元素的大小將進行調整。這在以下示例中顯示。

示例

<!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 列空間）。這在以下示例中顯示。

示例

<!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

列印頁面