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

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

## Пример

Давайте рассмотрим работу значения `auto-fit` на примере контейнера с восьмью элементами. Применим вместе со значением `auto-fit` известную вам по предыдущему уроку функцию `minmax`:

`<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-fit, minmax(150px, 1fr)); border: 2px solid #696989; padding: 10px; width: 600px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Пример

А теперь уменьшим ширину грид-контейнера до `400px`:

`<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-fit, minmax(150px, 1fr)); border: 2px solid #696989; padding: 10px; width: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

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

Пусть у вас есть таблица из девяти элементов. Установите для них с помощью значения `auto-fit` такую ширину столбцов и ширину грид-контейнера, чтобы все дочерние элементы разместились в три ряда.

А теперь модифицируйте предыдущую задачу так, чтобы все элементы расположились по двум рядам.

← →
↑