Выбор ответа Middle Вёрстка на практике обновлено
auto-fill и auto-fit в сетке карточек
Вопрос
Контейнер шириной 1000px, в нём 2 карточки. В чём разница между repeat(auto-fill, minmax(200px, 1fr)) и repeat(auto-fit, minmax(200px, 1fr))?
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: auto-fill оставит пустые колонки по 200px, auto-fit растянет до 500px. Обе записи создают столько колонок, сколько влезет (здесь 5 по 200px). auto-fill сохраняет пустые треки, поэтому две карточки занимают две колонки из пяти. auto-fit схлопывает пустые треки до нуля, и 1fr растягивает две карточки на всю…
Варианты ответа
auto-fillоставит пустые колонки по 200px,auto-fitрастянет до 500pxправильный ответ- Разницы нет: это синонимы, обе записи растянут карточки на 500px
auto-fitоставит пустые колонки, аauto-fillрастянет карточки по 500pxauto-fillне работает сminmax, и колонки будут по 1fr от ширины
Разбор
Обе записи создают столько колонок, сколько влезет (здесь 5 по 200px). auto-fill сохраняет пустые треки, поэтому две карточки занимают две колонки из пяти. auto-fit схлопывает пустые треки до нуля, и 1fr растягивает две карточки на всю ширину. С minmax работают оба варианта, это их основное применение.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.