CSS - grid-template-columns 屬性

CSS grid-template-columns 屬性用於定義網格佈局中列的數量和大小。值是空格分隔的列表。

語法

grid-template-columns: none | auto | max-content | min-content | length | initial | inherit;

屬性值

值	描述
none	如果需要，可以建立列。預設值。
auto	列的大小取決於容器的大小以及列中專案的內容大小。
max-content	具有此值的每一列的大小取決於該列中最大專案的尺寸。
min-content	具有此值的每一列的大小取決於該列中最小的專案的尺寸。
length	列的大小以長度單位指定（例如 px、em 等）。
initial	這將屬性設定為其預設值。
inherit	這從父元素繼承屬性。

CSS 網格模板列屬性示例

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

使用 None 值的網格模板列屬性

為了不為網格容器定義任何顯式列大小，我們使用 none 值。它有效地重置了列定義，並且網格將不使用任何定義的列結構。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

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

      .grid-container>div {
         border: 3px solid blue;
         color: white;
         background-color: #4d4dff;
         text-align: center;
         padding: 20px;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-template-columns property
   </h2>
   <h4>
      grid-template-columns: none
   </h4>
   <div class="grid-container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
      <div>
         Item-4
      </div>
   </div>

</body>

</html>

使用 Auto 值的網格模板列屬性

為了使列能夠根據其內容自動調整大小，我們使用 auto 值。每列將根據需要儘可能寬以適應其內容。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

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

      .grid-container>div {
         border: 3px solid blue;
         color: white;
         background-color: #4d4dff;
         text-align: center;
         padding: 20px;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-template-columns property
   </h2>
   <h4>
      grid-template-columns: auto auto auto 
      (3 columns are created and sizes depend
      on the size of container and content of items)
   </h4>
   <div class="grid-container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
      <div>
         Item-4
      </div>
      <div>
         Item-5
      </div>
      <div>
         Item-6
      </div>
      <div>
         Item-7
      </div>
      <div>
         Item-8
      </div>
      <div>
         Item-9
      </div>
   </div>

</body>

</html>

使用 Max Content 值的網格模板列屬性

為了使列與其內容所需的寬度一樣寬，而沒有任何截斷或換行，我們使用 max-content 值。列將擴充套件以適應其包含的最長內容，而不管網格容器的大小如何。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

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

      .grid-container>div {
         border: 3px solid blue;
         color: white;
         background-color: #4d4dff;
         text-align: center;
         padding: 20px;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-template-columns property
   </h2>
   <h4>
      grid-template-columns: max-content 
      max-content max-content (3 columns are
      created and sizes depend on the largest
      item in the column)
   </h4>
   <div class="grid-container">
      <div>
         This is Item-1
      </div>
      <div>
         2
      </div>
      <div>
         This is Item-3 in row 1
      </div>
      <div>
         Item-4
      </div>
      <div>
         Item-5
      </div>
      <div>
         Item-6
      </div>
      <div>
         Item-7
      </div>
      <div>
         8
      </div>
      <div>
         Item-9
      </div>
   </div>

</body>

</html>

使用 Min Content 值的網格模板列屬性

為了使列儘可能窄，同時仍能容納其內容而不會溢位，我們使用 min-content 值。列僅需要與顯示其內容的寬度一樣寬，而無需換行，但不會更窄。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

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

      .grid-container > div {
         border: 3px solid blue;
         color: white;
         background-color: #4d4dff;
         text-align: center;
         padding: 20px;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-template-columns property
   </h2>
   <h4>
      grid-template-columns: min-content 
      min-content min-content (3 columns 
      are created and sizes depend on the 
      smallest item in the column)
   </h4>
   <div class="grid-container">
      <div>
         Item-1
      </div>
      <div>
         2
      </div>
      <div>
         Item-3
      </div>
      <div>
         4
      </div>
      <div>
      </div>
      <div>
         6
      </div>
      <div>
         Item-7
      </div>
      <div>
         8
      </div>
      <div>
         Item-9
      </div>
   </div>

</body>

</html>

使用長度值的網格模板列屬性

可以使用長度值（例如 px、em、rem 等）來設定列的數量和大小。根據提供的值，將建立具有指定寬度的列數。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container{
         display: grid;
         grid-gap: 10px;
         background-color: lightgray;
         padding: 10px;
      }
      .grid-container1 {
         grid-template-columns: 140px 200px 140px;
      }
      .grid-container2{
         grid-template-columns: 10em 7em 10em;
      }
      .container > div {
         border: 3px solid blue;
         color: white;
         background-color: #4d4dff;
         text-align: center;
         padding: 20px;
      }
      .
   </style>
</head>

<body>
   <h2>
      CSS grid-template-columns property
   </h2>
   <h4>
      grid-template-columns: 150px 200px 150px 
      (3 columns are created and sizes are 150px,
      200px and 150px respectively)
   </h4>
   <div class=" container grid-container1">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
      <div>
         Item-4
      </div>
      <div>
         Item-5
      </div>
      <div>
         Item-6
      </div>
      <div>
         Item-7
      </div>
      <div>
         Item-8
      </div>
      <div>
         Item-9
      </div>
   </div>
   <h4>
   grid-template-columns: 10em 7em 10em 
   (3 columns are created and sizes are 
   10em, 7em and 10em respectively)
   </h4>
   <div class="container grid-container2">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
      <div>
         Item-4
      </div>
      <div>
         Item-5
      </div>
      <div>
         Item-6
      </div>
      <div>
         Item-7
      </div>
      <div>
         Item-8
      </div>
      <div>
         Item-9
      </div>
   </div>

</body>

</html>

使用百分比值的網格模板列屬性

可以使用百分比值（例如 10%、20%）來設定列的數量和大小。根據提供的值，將建立具有指定寬度的列數。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         display: grid;
         width: 500px;
         grid-gap: 10px;
         background-color: lightgray;
         padding: 10px;
         grid-template-columns: 25% 15% 25%;
      }

      .grid-container>div {
         border: 3px solid blue;
         color: white;
         background-color: #4d4dff;
         text-align: center;
         padding: 20px;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-template-columns property
   </h2>
   <h4>
      grid-template-columns: 25% 15% 25% 
      (3 columns are created and sizes are 25%,
      15% and 25% of the size of the container's
      width respectively)
   </h4>
   <div class="grid-container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
      <div>
         Item-4
      </div>
      <div>
         Item-5
      </div>
      <div>
         Item-6
      </div>
      <div>
         Item-7
      </div>
      <div>
         Item-8
      </div>
      <div>
         Item-9
      </div>
   </div>
</body>

</html>

支援的瀏覽器

屬性
grid-template-columns	57	16	52	10	44

css_properties_reference.htm

列印頁面

上一個

下一個