# Свойство grid-auto-flow

Свойство `grid-auto-flow` задает автоматическое размещение элементов в гриде. Может иметь значения `row` - заполняет ряды элементами, `column` - столбцы, `dense` - размещает элементы на все пустые места в сетке; `row dense` - располагает элементы, заполняя каждый ряд и все свободные места сетки; `column dense` - заполняет элементами каждый столбец и все свободное место в гриде.

## Синтаксис

`селектор { grid-auto-flow: заполняемая часть грида; }`

## Пример

Давайте заполним в таблице все ряды:

`<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; }`

:

## Пример

А теперь заполним элементами все столбцы в таблице:

`<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; }`

:

## Пример

Давайте разместим все элементы в таблице, чтобы не осталось свободного места:

`<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; }`

:

## Пример

А теперь давайте заполним элементами все свободное место в рядах:

`<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; }`

:

## Пример

Давайте изменим предыдущий пример, чтобы элементы заполнили все свободное место в столбцах:

`<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; }`

:

## Смотрите также

- свойство `grid`,
  которое задает сокращенную запись свойств столбцов и рядов
- свойство `grid-auto-rows`,
  которое задает количество и ширину рядов в неявном гриде
- свойство `grid-template-columns`,
  которое задает количество и ширину столбцов в гриде
- свойство `grid-template-rows`,
  которое задает количество и ширину рядов в гриде

← →
↑
en ru