Все статьи | Блог студента

О том, как я сломал голову, пока пытался сделать второй проект по верстке на Grid

Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции
О том, как я сломал голову, пока пытался сделать второй проект по верстке на ... главное изображение

Прежде чем рассказать о проблемах, с которыми я столкнулся, я поведаю о том, почему выбрал именно Grid.

Grid — просто восхитительная штука при создании адаптивного сайта. Почему я так голословен? Сейчас объясню на примере второго проекта по вёрстке.

Автоматическое изменение размеров блоков

Можно просто создать три колонки, прописать им размеры minmax и всё, дальше браузер всё сделает сам, красота ведь 😁

Да и, в принципе, единственная причина, по которой я решил использовать Grid — меньше мороки (думал я тогда) 🙃

Тег header — моя главная боль

Что делает Grid? Создаёт сетку, куда помещаются блоки. Что такое header и main? Отдельные блоки. И в этом вся проблема! Хочется сохранить семантику, но при этом каким-то образом ещё и нужно позиционировать header относительно main. Сделаем body grid-контейнером, тогда не сможем сделать фон на весь экран, main — тогда header нам скажет: «Извини, но твоя принцесса в другом замке». И как быть?

Я довольно долго ломал голову над этой задачей, а ведь решение было очень простым — Сделать Grid внутри Grid

enter image description here

То есть?

Мы создаём базовые стили grid-контейнера и задаём их сперва body, а потом main. Тегу main прописываем

grid-column: 1/-1;

Всё, теперь у нас будет возможность абсолютно позиционировать header относительно body, а main с ним сольётся и всё будет выглядеть как надо.

P.S. Надеюсь что строка для footer создастся сама 🙏

Если кому-то интересно, как это всё выглядит на деле, то вот ссылка на мой GitHub.

Аватар пользователя Шахзод Давлатов
Шахзод Давлатов 07 сентября 2021
Рекомендуемые программы

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

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