Выбор ответа Middle Grid спрашивают часто обновлено
auto-fit и auto-fill: в чём разница
Вопрос
В контейнере шириной 1000px всего 2 карточки. В каком случае они растянутся на всю ширину?
/* A */ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* B */ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Только в B: auto-fit схлопывает пустые треки, и 1fr берёт их место. Оба варианта создают столько колонок, сколько влезает (здесь 5). auto-fill оставляет пустые треки, и две карточки занимают 2 из 5 колонок. auto-fit схлопывает пустые треки до нуля, свободное место уходит в 1fr реальных колонок.
Варианты ответа
- В обоих:
1frвсегда растягивает реальные элементы на всю ширину - Только в A:
auto-fillзаполняет карточками всю ширину контейнера - Только в B:
auto-fitсхлопывает пустые треки, и1frберёт их местоправильный ответ - Ни в одном: пустые колонки остаются в обоих случаях, карточки по 200px
Разбор
Оба варианта создают столько колонок, сколько влезает (здесь 5). auto-fill оставляет пустые треки, и две карточки занимают 2 из 5 колонок. auto-fit схлопывает пустые треки до нуля, свободное место уходит в 1fr реальных колонок. Вариант «в обоих» неверен как раз из-за пустых треков в A. «Только в A» путает названия. «Ни в одном» не учитывает схлопывание в auto-fit.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.