Вопрос №55528 от пользователя Ольга Халеева в уроке «Первая сетка», курс «CSS: Вёрстка на Grid»

Ольга Халеева

Здравствуйте. (возможно, вопрос дурацкий) В чем разница между:

grid-template-columns: 1fr 100px и

grid-template-columns: auto 100px?

1 2

Nikita Mikhaylov

Здравствуйте

Не бывает дурацких вопросов :) Правильно, что спрашиваете

Да, не всегда можно прям сразу понять разницу между 1fr и auto. Отталкивайтесь от того, что вы контролируете.

В случае со значением auto всю работу по перераспределению места вы отдаёте браузеру. В большинстве случаев вы не заметите разницу, но когда нибудь есть возможность, что браузер не до конца поймёт ваш замысел. Тут действительно он заберет всё доступное ему пространство, но в случае с несколькими значениями auto браузер уже будет распределять место в зависимости и контента внутри грида

А вот 1fr чётко скажет забрать всё. И если появится рядом ещё одна колонка со значением 1fr, то пространство будет поделено поровну между ними, а не в зависимости от того, какой там контент и какое настроение у браузера

1

Используйте Хекслет по максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»

Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
25 мая 10 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
25 мая 10 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
25 мая 10 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
25 мая 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
Новый
Разработка фронтенд и бэкенд компонентов веб-приложений
25 мая 16 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Java-разработчик
Профессия
Разработка приложений на языке Java
25 мая 10 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
Создает веб-приложения со скоростью света
25 мая 5 месяцев