- Теория
- Теория
Значение 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.
Доработаем наш список карточек. Заменим фиксированное количество колонок на значение auto-fit. После этого изменим ширину <body> и посмотрим, как будет перестраиваться список.
Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. До 27 мая цена 22 900 ₽
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
