CSS - grid-auto-columns 屬性

上一頁
下一頁

CSS grid-auto-columns 屬性定義隱式建立的網格列的寬度。如果網格專案放置在未由 grid-template-columns 顯式設定尺寸的列中，則網格系統會建立隱式網格列來容納它。如果使用 grid-template-columns，則此屬性無效。

語法

grid-auto-columns: auto | length | percentage | max-content | min-content | minmax(min,max) | fit-content();

屬性值

值 描述
auto 列的大小取決於容器的大小。預設值。
長度 使用長度單位設定列的大小。
百分比 使用百分比值設定列的大小。
max-content 列的大小取決於內容的長度。不會發生換行。
min-content 列的大小取決於內容的長度。會發生換行。
minmax(min, max) 它指定最小預設列大小和最大可達列大小。
fit-content() 它指定要顯示內容的尺寸範圍。可能會發生換行。

CSS 網格自動列屬性示例

以下示例說明了使用不同值的 grid-auto-columns 屬性。

使用 Auto 值的網格自動列屬性

為了允許網格專案根據其內容和網格容器中的可用空間自行調整大小，我們使用 auto 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-columns: auto;
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-columns property
   </h2>
   <h4>
      grid-auto-columns: auto
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         Item-1
      </div>
      <div class="grid-item item2">
         Item-2
      </div>
      <div class="grid-item item3">
         Item-3
      </div>
      <div class="grid-item item4">
         Item-4
      </div>
      <div class="grid-item item5">
         Item-5
      </div>

   </div>
</body>

</html>

使用長度值的網格自動列屬性

要設定隱式列的大小，我們可以使用長度單位（例如 10px、20em 等）指定大小。因此，所有隱式建立的列都將具有指定的大小。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-columns: 140px;
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-columns property
   </h2>
   <h4>
      grid-auto-columns: 140px
      (each column is 140px)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         Item-1
      </div>
      <div class="grid-item item2">
         Item-2
      </div>
      <div class="grid-item item3">
         Item-3
      </div>
      <div class="grid-item item4">
         Item-4
      </div>
      <div class="grid-item item5">
         Item-5
      </div>

   </div>
</body>

</html>

使用百分比值的網格自動列屬性

要設定隱式列的大小，我們可以使用百分比值（例如 10%、20% 等）指定大小，這些值將大小分配為容器大小的百分比。因此，所有隱式建立的列都將具有指定的大小。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-columns: 23%;
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-columns property
   </h2>
   <h4>
      grid-auto-columns: 15% (each column is 
      15% of the width of the container)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         Item-1
      </div>
      <div class="grid-item item2">
         Item-2
      </div>
      <div class="grid-item item3">
         Item-3
      </div>
      <div class="grid-item item4">
         Item-4
      </div>
      <div class="grid-item item5">
         Item-5
      </div>

   </div>
</body>

</html>

使用 Max Content 值的網格自動列屬性

要使隱式建立的列與列中最大的內容一樣寬，我們使用 max-content 值。每列都會擴充套件以適應其內容，而不會換行或裁剪，使列與最大的內容專案一樣寬。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-columns: max-content;
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-columns property
   </h2>
   <h4>
      grid-auto-columns: max-content (the items are sized 
      such that they accomodate all the content without
      overflow or wrapping)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         This is first Item1
      </div>
      <div class="grid-item item2">
         Second Item
      </div>
      <div class="grid-item item3">
         3rd
      </div>
      <div class="grid-item item4">
         fourth
      </div>
      <div class="grid-item item5">
         5th
      </div>

   </div>
</body>

</html>

使用 Min Content 值的網格自動列屬性

要使隱式建立的列與它們內部最小的內容一樣窄，同時仍確保所有內容都完全可見，我們使用 min-content 值。這允許列縮小以適應最小的內容大小，從而導致換行。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-columns: min-content;
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-columns property
   </h2>
   <h4>
      grid-auto-columns: min-content (the items are sized
      such that they accomodate all the content with
      overflow or wrapping)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         This is first Item1
      </div>
      <div class="grid-item item2">
         Second Item
      </div>
      <div class="grid-item item3">
         3rd
      </div>
      <div class="grid-item item4">
         fourth
      </div>
      <div class="grid-item item5">
         5th
      </div>

   </div>
</body>

</html>

使用 MinMax 函式的網格自動列屬性

要為網格專案定義一個尺寸範圍，我們使用 minmax() 函式來指定專案的預設最小尺寸和最大可達尺寸（例如，minmax(50px,100px) 表示初始尺寸為 50px，但元素可以增長到 100px）。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-columns: minmax(100px, 150px);
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-columns property
   </h2>
   <h4>
      grid-auto-columns: minmax(100px, 150px) 
      (the items will have an initial size of
      100px but cant grow upto 150px depending
      on the content.)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         This is the first Item1.
      </div>
      <div class="grid-item item2">
         This is Second Item.
      </div>
      <div class="grid-item item3">
         3rd
      </div>
      <div class="grid-item item4">
         fourth
      </div>
      <div class="grid-item item5">
         5th
      </div>

   </div>
</body>

</html>

使用 Fit Content 函式的網格自動列屬性

要根據其內容（不超過指定的最大值）為隱式建立的列分配大小，我們使用 fit-content() 函式。元素最多可以具有分配給函式的大小，如果內容比指定的大小長，則會發生換行。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-columns: fit-content(120px);
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-columns property
   </h2>
   <h4>
      grid-auto-columns: fit-content(120px)
      (the items will have a max width of 120px
      and will not exceed this value but ensure
      the content is completely displayed.)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         This is the first Item1.
      </div>
      <div class="grid-item item2">
         This is Second Item.
      </div>
      <div class="grid-item item3">
         3rd
      </div>
      <div class="grid-item item4">
         fourth
      </div>
      <div class="grid-item item5">
         5th
      </div>

   </div>
</body>

</html>

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
grid-auto-columns 57 16 52 10 44
css_properties_reference.htm
列印頁面
上一頁
下一頁
廣告