Прежде чем рассказать о проблемах, с которыми я столкнулся, я поведаю о том, почему выбрал именно Grid.
Grid — просто восхитительная штука при создании адаптивного сайта. Почему я так голословен? Сейчас объясню на примере второго проекта по вёрстке.
Можно просто создать три колонки, прописать им размеры minmax и всё, дальше браузер всё сделает сам, красота ведь 😁
Да и, в принципе, единственная причина, по которой я решил использовать Grid — меньше мороки (думал я тогда) 🙃
Что делает Grid? Создаёт сетку, куда помещаются блоки. Что такое header и main? Отдельные блоки. И в этом вся проблема! Хочется сохранить семантику, но при этом каким-то образом ещё и нужно позиционировать header относительно main. Сделаем body grid-контейнером, тогда не сможем сделать фон на весь экран, main — тогда header нам скажет: «Извини, но твоя принцесса в другом замке». И как быть?
Я довольно долго ломал голову над этой задачей, а ведь решение было очень простым — Сделать Grid внутри Grid
То есть?
Мы создаём базовые стили grid-контейнера и задаём их сперва body, а потом main. Тегу main прописываем
grid-column: 1/-1;
Всё, теперь у нас будет возможность абсолютно позиционировать header относительно body, а main с ним сольётся и всё будет выглядеть как надо.
P.S. Надеюсь что строка для footer создастся сама 🙏
Если кому-то интересно, как это всё выглядит на деле, то вот ссылка на мой GitHub.