# grid-auto-flow property

The `grid-auto-flow` property specifies an automatic placement of elements in a grid. It can have the ​​`row` value - fills rows with elements, `column` - columns, `dense` - places elements on all empty spaces in the grid; `row dense` - arranges elements, filling each row and all free spaces of the grid; `column dense` - fills each column and all free space in the grid with elements.

## Syntax

`selector { grid-auto-flow: part of a grid to fill; }`

## Example

Let's fill in all the rows in the table:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>` `#parent { display: grid; grid-auto-flow: row; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr 2fr; border: 2px solid #696989; padding: 10px; width: 400px; height: 200px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Example

Now let’s fill all the columns in the table with elements:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>` `#parent { display: grid; grid-auto-flow: column; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr 2fr; border: 2px solid #696989; padding: 10px; width: 400px; height: 200px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Example

Let's place all the elements in the table so that there is no empty space left:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>` `#parent { display: grid; grid-auto-flow: dense; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr 2fr; border: 2px solid #696989; padding: 10px; width: 400px; height: 200px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Example

Now let's fill all the free space in the rows with elements:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>` `#parent { display: grid; grid-auto-flow: row dense; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr 2fr; border: 2px solid #696989; padding: 10px; width: 400px; height: 200px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Example

Let's change the previous example so that the elements fill all the empty space in the columns:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>` `#parent { display: grid; grid-auto-flow: column dense; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr 2fr; border: 2px solid #696989; padding: 10px; width: 400px; height: 200px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## See also

- the `grid` property
  that specifies a shorthand for columns and rows properties
- the `grid-auto-rows` property
  that specifies a number and width of rows in an implicit grid
- the `grid-template-columns` property
  that specifies a number and width of columns in a grid
- the `grid-template-rows` property
  that specifies a number and width of rows in a grid

← →
↑
en ru