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

打印页面