Весенние скидки до 30 000 ₽
На все профессии до 31 марта
Главная | Все статьи | Дневник студента

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

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

Прежде чем рассказать о проблемах, с которыми я столкнулся, я поведаю о том, почему выбрал именно 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
2
Рекомендуемые программы
профессия
от 6 300 ₽ в месяц
Разработка фронтенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 4 апреля
профессия
от 6 300 ₽ в месяц
Разработка веб-приложений на Django
10 месяцев
с нуля
Старт 4 апреля
профессия
от 6 183 ₽ в месяц
Ручное тестирование веб-приложений
4 месяца
с нуля
Старт 4 апреля
профессия
от 6 300 ₽ в месяц
Разработка приложений на языке Java
10 месяцев
с нуля
Старт 4 апреля
профессия
от 5 025 ₽ в месяц
новый
Сбор, анализ и интерпретация данных
9 месяцев
с нуля
Старт 4 апреля
профессия
от 6 300 ₽ в месяц
Разработка веб-приложений на Laravel
10 месяцев
с нуля
Старт 4 апреля
профессия
от 5 840 ₽ в месяц
Создание веб-приложений со скоростью света
5 месяцев
c опытом
Старт 4 апреля
профессия
от 9 900 ₽ в месяц
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
16 месяцев
с нуля
Старт 4 апреля
профессия
от 6 300 ₽ в месяц
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 4 апреля
профессия
новый
Автоматизированное тестирование веб-приложений на JavaScript
8 месяцев
c опытом
в разработке
Старт 4 апреля
профессия
Верстка с использованием последних стандартов CSS
5 месяцев
с нуля
Старт в любое время