Выбор ответа Junior Grid спрашивают часто обновлено
Что означает единица fr в Grid
Вопрос
Колонки заданы как grid-template-columns: 100px 1fr 2fr, ширина контейнера 400px, gap нет. Какой ширины будут колонки?
.grid {
display: grid;
width: 400px;
grid-template-columns: 100px 1fr 2fr;
}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: 100px, 100px, 200px. fr делит оставшееся место после фиксированных треков: 400 - 100 = 300px, делим как 1:2, получаем 100px и 200px.
Варианты ответа
- 100px, 100px, 200pxправильный ответ
- 100px, 133px, 267px
- 100px, 150px, 150px
- 133px, 133px, 133px
Разбор
fr делит оставшееся место после фиксированных треков: 400 - 100 = 300px, делим как 1:2, получаем 100px и 200px. Вариант 133/267 делит все 400px, забыв про фиксированную колонку. 150/150 игнорирует коэффициенты. Три равные колонки по 133px получились бы при repeat(3, 1fr).
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.