CSS - grid-auto-flow 屬性

CSS grid-auto-flow 屬性控制當網格項數量超過顯式定義的網格軌道數量時，網格項如何在網格中放置。它決定網格自動將專案放置到隱式行或列的方向。

語法

grid-auto-flow: row | column | dense | row dense | column dense;

屬性值

值	描述
row	按行放置專案。預設值。
column	按列放置專案。
dense	放置專案以最大程度地填充容器空間。
row dense	按行放置專案，並填充容器空間。
column dense	按列放置專案，並填充容器空間。

CSS 網格自動流屬性示例

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

帶有 row 值的網格自動流屬性

要在網格佈局中按行放置元素，我們使用row 值。此設定導致專案從左到右放置，填滿每一行後再移動到下一行。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         background-color: lightblue;
         grid-template-rows: auto auto auto;
         grid-template-columns: auto auto auto auto;
         grid-auto-flow: row;
         gap: 20px;
         padding: 10px;
      }

      .container>div {
         border: 2px solid;
         text-align: center;
         padding: 10px;
         background-color: lightcoral;
         color: white;
         align-items: center;
      }

      .item {
         grid-area: auto /span 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-flow property
   </h2>
   <h4>
      grid-auto-flow: row (the elements 
      are arranged row-wise)
   </h4>
   <div class="container">
      <div>
         A
      </div>
      <div>
         B
      </div>
      <div class="item">
         C
      </div>
      <div>
         D
      </div>
      <div>
         E
      </div>
      <div>
         F
      </div>
   </div>
</body>

</html>

帶有 column 值的網格自動流屬性

要在網格佈局中按列放置元素，我們使用column 值。此設定導致專案從上到下放置，填滿每一列後再移動到下一列。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         background-color: lightblue;
         grid-template-rows: auto auto auto;
         grid-template-columns: auto auto auto auto;
         grid-auto-flow: column;
         gap: 20px;
         padding: 10px;
      }

      .container>div {
         border: 2px solid;
         text-align: center;
         padding: 10px;
         background-color: lightcoral;
         color: white;
         align-items: center;
      }

      .item {
         grid-area: auto /span 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-flow property
   </h2>
   <h4>
      grid-auto-flow: column (the elements
      are arranged column-wise)
   </h4>
   <div class="container">
      <div>
         A
      </div>
      <div>
         B
      </div>
      <div class="item">
         C
      </div>
      <div>
         D
      </div>
      <div>
         E
      </div>
      <div>
         F
      </div>
   </div>
</body>

</html>

帶有 dense 值的網格自動流屬性

要在網格佈局中使元素儘可能填充容器空間，我們使用dense 值。此設定嘗試透過將專案放置在第一個可用空間來填充網格中的可用間隙。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         background-color: lightblue;
         grid-template-rows: auto auto auto;
         grid-template-columns: auto auto auto auto;
         grid-auto-flow: dense;
         gap: 20px;
         padding: 10px;
      }

      .container>div {
         border: 2px solid;
         text-align: center;
         padding: 10px;
         background-color: lightcoral;
         color: white;
         align-items: center;
      }

      .item {
         grid-area: auto /span 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-flow property
   </h2>
   <h4>
      grid-auto-flow: dense (the elements are arranged
      to fill maximum space)
   </h4>
   <div class="container">
      <div>
         A
      </div>
      <div>
         B
      </div>
      <div class="item">
         C
      </div>
      <div>
         D
      </div>
      <div>
         E
      </div>
      <div>
         F
      </div>
   </div>
</body>

</html>

帶有 row dense 值的網格自動流屬性

要在網格佈局中按行放置元素並儘可能填充容器空間，我們使用row dense 值。此設定按行放置專案，並嘗試填充任何可用間隙以使佈局更緊湊。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         background-color: lightblue;
         grid-template-rows: auto auto auto;
         grid-template-columns: auto auto auto auto;
         grid-auto-flow: row dense;
         gap: 20px;
         padding: 10px;
      }

      .container>div {
         border: 2px solid;
         text-align: center;
         padding: 10px;
         background-color: lightcoral;
         color: white;
         align-items: center;
      }

      .item {
         grid-area: auto /span 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-flow property
   </h2>
   <h4>
      grid-auto-flow: row dense (the elements are
      arranged row-wise and also fill maximum
      available space)
   </h4>
   <div class="container">
      <div>
         A
      </div>
      <div>
         B
      </div>
      <div class="item">
         C
      </div>
      <div>
         D
      </div>
      <div>
         E
      </div>
      <div>
         F
      </div>
   </div>
</body>

</html>

帶有 column dense 值的網格自動流屬性

要在網格佈局中按列放置元素並儘可能填充容器空間，我們使用column dense 值。此設定按列放置專案，並嘗試填充任何可用間隙以使佈局更緊湊。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         background-color: lightblue;
         grid-template-rows: auto auto auto;
         grid-template-columns: auto auto auto auto;
         grid-auto-flow: column dense;
         gap: 20px;
         padding: 10px;
      }

      .container>div {
         border: 2px solid;
         text-align: center;
         padding: 10px;
         background-color: lightcoral;
         color: white;
         align-items: center;
      }

      .item {
         grid-area: auto /span 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-flow property
   </h2>
   <h4>
      grid-auto-flow: column dense (the elements are
      arranged column-wise and fill maximum
      available space)
   </h4>
   <div class="container">
      <div>
         A
      </div>
      <div>
         B
      </div>
      <div class="item">
         C
      </div>
      <div>
         D
      </div>
      <div>
         E
      </div>
      <div>
         F
      </div>
   </div>
</body>

</html>

支援的瀏覽器

屬性
grid-auto-flow	57	16	52	10	44

css_properties_reference.htm

列印頁面