Свойство grid-template-columns: схема сетки
Как сочетать фиксированную боковую область и гибкий контент или создавать равные колонки.
Как это работает
grid-template-columns задаёт явные колонки grid-контейнера. Можно смешивать фиксированные размеры, доли свободного места и функции ограничений. При записи 180px minmax(0, 1fr) боковая область фиксирована, а основной контент занимает остаток.
repeat сокращает повторение одинаковых треков. minmax помогает задать минимальный и максимальный размер каждого трека. После вычета gap и фиксированных размеров оставшееся пространство распределяется между fr, но минимальные ограничения содержимого тоже влияют на результат.
Пример в интерфейсе
.layout { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; }
.layout > div { padding: 16px; background: #eaf4ee; }
@media(max-width: 420px) { .layout { grid-template-columns: 1fr; } }Значения и поведение
| Значение или правило | Результат |
|---|---|
| repeat(3, 1fr) | Три гибкие колонки. |
| 180px minmax(0, 1fr) | Боковая колонка и сжимаемый основной контент. |
| auto-fit | Сворачивание пустых автоматически повторённых треков. |
| minmax(…) | Нижняя и верхняя границы трека. |
На что обратить внимание
Не оставляйте фиксированную боковую колонку рядом с узким контентом на телефоне. Добавьте переключение в одну колонку по подходящему условию.
Проверьте на практике
Измените ширину боковой области и проверьте остаток. Затем добавьте медиазапрос, который убирает двухколоночную схему на узком экране.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.