css CSS |网格-自动流动属性

CSS |网格-自动流动属性

原文:https://www.geeksforgeeks.org/css-grid-auto-flow-property/

网格自动流动属性，精确指定自动放置的项目如何流入网格。

语法:

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

Row: auto-placement algorithm places items, by filling each row in turn, adding new rows as necessary.

语法:

```html grid-auto-flow: row;

```

示例-1:

```html <!DOCTYPE html>

             CSS grid-auto-flow Property
        .main {             height: 200px;             width: 200px;             display: grid;             grid-gap: 10px;             grid-template: repeat(4, 1fr) / repeat(2, 1fr);

/ grid-auto-flow property used here /             grid-auto-flow: row;         }

.Geeks1 {             background-color: red;             grid-row-start: 3;         }

.Geeks2 {             background-color: blue;         }

.Geeks3 {             background-color: black;         }

.Geeks4 {             grid-column-start: 2;             background-color: orange;         }








                         ```

输出:
Column: auto-placement algorithm places items, by filling each column in turn, adding new columns as necessary.

语法:

```html grid-auto-flow: column;

```

示例-2:

```html <!DOCTYPE html>

             CSS grid-auto-flow Property
        .main {             height: 200px;             width: 200px;             display: grid;             grid-gap: 10px;             grid-template: repeat(4, 1fr) / repeat(2, 1fr);

/ grid-auto-flow property used here /             grid-auto-flow: column;         }

.Geeks1 {             background-color: red;             grid-row-start: 3;         }

.Geeks2 {             background-color: blue;         }

.Geeks3 {             background-color: black;         }

.Geeks4 {             grid-column-start: 2;             background-color: orange;         }








                     ```

输出:
Column Dense: specifying that the auto-placement algorithm uses a “dense” packing algorithm for column.

语法:

```html grid-auto-flow: column dense;

```

示例-3:

```html <!DOCTYPE html>

             CSS grid-auto-flow Property
        .main {             height: 200px;             width: 200px;             display: grid;             grid-gap: 10px;             grid-template: repeat(4, 1fr) / repeat(2, 1fr);

/ grid-auto-flow property used here /             grid-auto-flow: column dense;         }

.Geeks1 {             background-color: red;             grid-row-start: 3;         }

.Geeks2 {             background-color: blue;         }

.Geeks3 {             background-color: black;         }

.Geeks4 {             grid-column-start: 2;             background-color: orange;         }








                     ```

输出:
Row Dense: specifying that the auto-placement algorithm uses a “dense” packing algorithm for rows. Syntax:

```html grid-auto-flow: row dense;

```

示例-4:

```html <!DOCTYPE html>

             CSS grid-auto-flow Property
        .main {             height: 200px;             width: 200px;             display: grid;             grid-gap: 10px;             grid-template: repeat(4, 1fr) / repeat(2, 1fr);

/ grid-auto-flow property used here /             grid-auto-flow: row dense;         }

.Geeks1 {             background-color: red;             grid-row-start: 3;         }

.Geeks2 {             background-color: blue;         }

.Geeks3 {             background-color: black;         }

.Geeks4 {             grid-column-start: 2;             background-color: orange;         }








                                 ```

输出: