1 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Прежде чем рассказать о проблемах, с которыми я столкнулся, я поведаю о том, почему выбрал именно Grid.</p>
1
<p>Прежде чем рассказать о проблемах, с которыми я столкнулся, я поведаю о том, почему выбрал именно Grid.</p>
2
<p>Grid - просто восхитительная штука при создании адаптивного сайта. Почему я так голословен? Сейчас объясню на примере<a>второго проекта по вёрстке</a>.</p>
2
<p>Grid - просто восхитительная штука при создании адаптивного сайта. Почему я так голословен? Сейчас объясню на примере<a>второго проекта по вёрстке</a>.</p>
3
<h2>Содержание</h2>
3
<h2>Содержание</h2>
4
<ul><li><a>Автоматическое изменение размеров блоков</a></li>
4
<ul><li><a>Автоматическое изменение размеров блоков</a></li>
5
<li><a>Тег header - моя главная боль</a></li>
5
<li><a>Тег header - моя главная боль</a></li>
6
</ul><h2>Автоматическое изменение размеров блоков</h2>
6
</ul><h2>Автоматическое изменение размеров блоков</h2>
7
<p>Можно просто создать три колонки, прописать им размеры minmax и всё, дальше браузер всё сделает сам, красота ведь 😁</p>
7
<p>Можно просто создать три колонки, прописать им размеры minmax и всё, дальше браузер всё сделает сам, красота ведь 😁</p>
8
<p>Да и, в принципе, единственная причина, по которой я решил использовать Grid - меньше мороки (думал я тогда) 🙃</p>
8
<p>Да и, в принципе, единственная причина, по которой я решил использовать Grid - меньше мороки (думал я тогда) 🙃</p>
9
+
<h2>Тег header - моя главная боль</h2>
9
<p>Что делает Grid? Создаёт сетку, куда помещаются блоки. Что такое header и main? Отдельные блоки. И в этом вся проблема! Хочется сохранить семантику, но при этом каким-то образом ещё и нужно позиционировать header относительно main. Сделаем body grid-контейнером, тогда не сможем сделать фон на весь экран, main - тогда header нам скажет: "Извини, но твоя принцесса в другом замке". И как быть?</p>
10
<p>Что делает Grid? Создаёт сетку, куда помещаются блоки. Что такое header и main? Отдельные блоки. И в этом вся проблема! Хочется сохранить семантику, но при этом каким-то образом ещё и нужно позиционировать header относительно main. Сделаем body grid-контейнером, тогда не сможем сделать фон на весь экран, main - тогда header нам скажет: "Извини, но твоя принцесса в другом замке". И как быть?</p>
10
<p>Я довольно долго ломал голову над этой задачей, а ведь решение было очень простым - Сделать Grid внутри Grid</p>
11
<p>Я довольно долго ломал голову над этой задачей, а ведь решение было очень простым - Сделать Grid внутри Grid</p>
11
<p><strong>То есть?</strong></p>
12
<p><strong>То есть?</strong></p>
12
<p>Мы создаём базовые стили grid-контейнера и задаём их сперва body, а потом main. Тегу main прописываем</p>
13
<p>Мы создаём базовые стили grid-контейнера и задаём их сперва body, а потом main. Тегу main прописываем</p>
13
<p>Всё, теперь у нас будет возможность абсолютно позиционировать header относительно body, а main с ним сольётся и всё будет выглядеть как надо.</p>
14
<p>Всё, теперь у нас будет возможность абсолютно позиционировать header относительно body, а main с ним сольётся и всё будет выглядеть как надо.</p>
14
<p>P.S. Надеюсь что строка для footer создастся сама 🙏</p>
15
<p>P.S. Надеюсь что строка для footer создастся сама 🙏</p>
15
<p>Если кому-то интересно, как это всё выглядит на деле, то вот ссылка на мой<a>GitHub</a>.</p>
16
<p>Если кому-то интересно, как это всё выглядит на деле, то вот ссылка на мой<a>GitHub</a>.</p>