# Значение auto-fill в CSS гридах

Для установлении размера одинаковых столбцов грид-контейнера очень удобно в функции `repeat` указывать значение `auto-fill`, благодаря которому наш контейнер заполнится одинаковыми столбцами нужной нам ширины.

Давайте сделаем таблицу из восьми элементов и зададим каждому столбцу одинаковую ширину в `200px`. При этом, пусть значение `auto-fill` само высчитает нужное количество столбцов:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div>` `#parent { display: grid; grid-template-columns: repeat(auto-fill, 200px); border: 2px solid #696989; padding: 10px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

Установите ширину столбца в `200px`. Поизменяйте ширину родителя и посмотрите, как меняется количество колонок.

← →
↑