# Количество и ширина рядов в CSS гридах

Элементы грида можно также разместить по рядам. Для этого предназначено свойство `grid-template-rows`. Это свойство через пробел принимает размеры рядов. В нем можно применять те же значения, которые мы изучали и для столбцов.

## Пример

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

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>` `#parent { display: grid; grid-template-rows: 50px 100px 50px 50px; border: 2px solid #696989; padding: 10px; width: 600px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Пример

Укажем для первого и третьего рядов фиксированную ширину в пикселях, а второй ряд пусть займет оставшееся место:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> </div>` `#parent { display: grid; grid-template-rows: 100px auto 60px; border: 2px solid #696989; padding: 10px; width: 600px; height: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Пример

Используем функцию `repeat` для указания размеров рядов:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> </div>` `#parent { display: grid; grid-template-rows: repeat(3, 1fr); border: 2px solid #696989; padding: 10px; width: 600px; height: 200px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Пример

Назначим рядам высоту `50px`, а количество рядов зададим автоматически с помощью значения `auto-fill`:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>` `#parent { display: grid; grid-template-rows: repeat(auto-fill, 50px); border: 2px solid #696989; padding: 10px; width: 400px; height: 200px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Практические задачи

Разместите блоки в три ряда. Пусть первый блок будет иметь размер `100px`, второй `150px`, а третий `200px`.

Пусть в вашем гриде три ряда. Сделайте так, чтобы они имели одинаковую ширину.

← →
↑