• Теория
  • Теория

Значение auto-fit

В прошлом задании мы использовали repeat, чтобы создать несколько колонок. Их количество было фиксированным: какое число указано в скобках, на столько колонок и разделялось содержимое контейнера. Но нам нужно сделать так, чтобы количество колонок зависело от ширины окна.

Для этого используем специальное значение auto-fit. Его пишут в скобках после repeat вместо числа колонок:

grid-template-columns: repeat(auto-fit, ширина колонки);

Значение auto-fit указывает, что колонок должно быть столько, сколько может поместиться в грид-контейнере.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 100px);
}

Код в примере разделит контейнер на колонки шириной 100px.

repeat (auto-fit, 100px)
width: 200px;
width: 300px;
width: 400px;

Доработаем наш список карточек. Заменим фиксированное количество колонок на значение auto-fit. После этого изменим ширину <body> и посмотрим, как будет перестраиваться список.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Микросетки. Начало» тренажёра «Базовые механики построения сеток» можно после регистрации и оформления подписки.

Зарегистрироваться