0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Познакомившись с позиционированием и Flex, вы могли заметить, что при всём многообразии доступных средств верстать непосредственно макеты с использованием этих инструментов не так просто, как хотелось бы. Добавив множество техник, Flex не решил главной проблемы - быстрого создания сетки для сайта. Для создания хорошей структуры приходится делать дополнительные вложенности, ведь Flex по своей сути является одномерной системой. Мы можем удобно управлять контентом либо по оси<strong>x</strong>, либо по оси<strong>y</strong>. Это отлично при работе с контентом, но не при создании структуры страницы.</p>
1
<p>Познакомившись с позиционированием и Flex, вы могли заметить, что при всём многообразии доступных средств верстать непосредственно макеты с использованием этих инструментов не так просто, как хотелось бы. Добавив множество техник, Flex не решил главной проблемы - быстрого создания сетки для сайта. Для создания хорошей структуры приходится делать дополнительные вложенности, ведь Flex по своей сути является одномерной системой. Мы можем удобно управлять контентом либо по оси<strong>x</strong>, либо по оси<strong>y</strong>. Это отлично при работе с контентом, но не при создании структуры страницы.</p>
2
<p>Flex был призван изменить стандарты верстки, избавив разработчиков от неудобных позиционирований и бесконечного страдания с float. Хоть ему это отлично удалось, но встала главная проблема: "а что делать со сложными шаблонами?". Количество<em>flex</em>контейнеров росло пропорционально количеству нестандартных элементов. При этом управлять таким зоопарком становилось всё труднее и труднее. Не имея четкой структуры сетки веб-страницы, которая была бы описана в одном месте, всё превращалось в невероятно хрупкую структуру. Она ломалась быстрее, чем вы успевали моргнуть.</p>
2
<p>Flex был призван изменить стандарты верстки, избавив разработчиков от неудобных позиционирований и бесконечного страдания с float. Хоть ему это отлично удалось, но встала главная проблема: "а что делать со сложными шаблонами?". Количество<em>flex</em>контейнеров росло пропорционально количеству нестандартных элементов. При этом управлять таким зоопарком становилось всё труднее и труднее. Не имея четкой структуры сетки веб-страницы, которая была бы описана в одном месте, всё превращалось в невероятно хрупкую структуру. Она ломалась быстрее, чем вы успевали моргнуть.</p>
3
<p>Для создания структуры страницы появился еще один мощный инструмент - CSS Grid Layout или просто Grid. CSS Grid Layout, в отличие от Flex, является двумерной системой компоновки контента на странице.</p>
3
<p>Для создания структуры страницы появился еще один мощный инструмент - CSS Grid Layout или просто Grid. CSS Grid Layout, в отличие от Flex, является двумерной системой компоновки контента на странице.</p>
4
<p><strong>Важно:</strong>Grid не является заменой Flex и не создавался с такой целью. Это два разных модуля, которые прекрасно работают друг с другом.</p>
4
<p><strong>Важно:</strong>Grid не является заменой Flex и не создавался с такой целью. Это два разных модуля, которые прекрасно работают друг с другом.</p>
5
<h3>Практика</h3>
5
<h3>Практика</h3>
6
<p>Многие из уроков в данном курсе будут иметь практики с возможностью перехода в веб-доступ. Старайтесь не просто выполнять задание, а после успешного прохождения также экспериментируйте с кодом и возможностями, которые вы узнали.</p>
6
<p>Многие из уроков в данном курсе будут иметь практики с возможностью перехода в веб-доступ. Старайтесь не просто выполнять задание, а после успешного прохождения также экспериментируйте с кодом и возможностями, которые вы узнали.</p>
7
<p>В течение курса вы будете встречать самостоятельные задания. При необходимости вы можете попрактиковаться в задачах, представленных в заданиях. Также в них будут примеры кода, в которые можно подглядывать или просто изучать.</p>
7
<p>В течение курса вы будете встречать самостоятельные задания. При необходимости вы можете попрактиковаться в задачах, представленных в заданиях. Также в них будут примеры кода, в которые можно подглядывать или просто изучать.</p>
8
<h3>CodePen</h3>
8
<h3>CodePen</h3>
9
<p>Другая возможность применить навыки, полученные при работе с курсом - использование сервиса<a>CodePen</a>. Вы можете создать свой<strong>pen</strong>, внутри которого экспериментировать с позиционированием.</p>
9
<p>Другая возможность применить навыки, полученные при работе с курсом - использование сервиса<a>CodePen</a>. Вы можете создать свой<strong>pen</strong>, внутри которого экспериментировать с позиционированием.</p>
10
<p>Также в каждом уроке курса будут представлены примеры, которые подгружаются с<strong>CodePen</strong>. Они доступны для изучения, а также вы имеете возможность в режиме реального времени вносить правки и следить за результатом. Не пропускайте такую возможность.</p>
10
<p>Также в каждом уроке курса будут представлены примеры, которые подгружаются с<strong>CodePen</strong>. Они доступны для изучения, а также вы имеете возможность в режиме реального времени вносить правки и следить за результатом. Не пропускайте такую возможность.</p>