CSS - grid-auto-rows 屬性

上一頁
下一頁

CSS grid-auto-rows 屬性定義了隱式建立的網格行軌道或一組軌道的尺寸。當網格項放置在未透過 grid-template-rows 指定大小的行中時，網格系統會建立隱式網格軌道來容納它。如果使用 **grid-template-rows**，則此屬性無效。

語法

grid-auto-rows: 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-rows** 屬性。

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

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

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-rows: 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-rows property
   </h2>
   <h4>
      grid-auto-rows: 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-rows: 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-rows property
   </h2>
   <h4>
      grid-auto-rows: 140px (each 
      row is 140px high)
   </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 {
         height: 300px;
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-rows: 40%;
         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-rows property
   </h2>
   <h4>
      grid-auto-rows: 40% (each row has 
      40% of the container's height)
   </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-rows: 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-rows property
   </h2>
   <h4>
      grid-auto-rows: max-content (the height of the 
      items in each row is determined by the longest
      sentence height in the row)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         This is the first Item
      </div>
      <div class="grid-item item2">
         This is the second box in the grid layout
         and is being made longer to demonstrate the effect.
      </div>
      <div class="grid-item item3">
         This is third box in the layout.
      </div>
      <div class="grid-item item4">
         This is fourth box in the layout.
      </div>
      <div class="grid-item item5">
         This is the fifth box in the grid layout.
      </div>

   </div>
</body>

</html>

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

為了將行高設定為適合內容且不會溢位的最小尺寸，我們使用 **min-content** 值。行將盡可能短，同時仍確保內容完全可見且不會被切斷。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-rows: 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-rows Property
   </h2>
   <h4>
      grid-auto-rows: min-content (The rows will be sized
      to fit the minimum height required by their content.)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         This is first item.
      </div>
      <div class="grid-item item2">
         This is Second item.
      </div>
      <div class="grid-item item3">
         This is third item 
      </div>
      <div class="grid-item item4">
         This is fourth
      </div>
      <div class="grid-item item5">
         This is fifth
      </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-rows: minmax(40px, 87px);
         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-rows property
   </h2>
   <h4>
      grid-auto-rows: minmax(40px, 87px) (the initial 
      height of the items is 40px and maximum 
      attainable height is 87px)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         This is the first Item1
      </div>
      <div class="grid-item item2">
         This is the second box in the grid layout and
         is being made longer to demonstrate the effect.
      </div>
      <div class="grid-item item3">
         This is third box in the layout.
      </div>
      <div class="grid-item item4">
         This is fourth box in the layout.
      </div>
      <div class="grid-item item5">
         This is the fifth box in the grid layout.
      </div>

   </div>
</body>

</html>

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

為了設定適合其內容但位於指定最大尺寸內的行高（例如 fit-content(200px) 表示行將根據需要調整高度以適合內容，但不會超過 200 畫素）。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-rows: fit-content(50px);
         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-rows Property
   </h2>
   <h4>
      grid-auto-rows: fit-content (The rows will
      have a maximum height of 50px)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         This is first item.
      </div>
      <div class="grid-item item2">
         This is Second item .
      </div>
      <div class="grid-item item3">
         This is third item 
      </div>
      <div class="grid-item item4">
         This is fourth
      </div>
      <div class="grid-item item5">
         This is fifth
      </div>
   </div>
</body>

</html>

支援的瀏覽器

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