CSS Grid Layout. Введение:
В данном премиум курсе мы познакомимся с очень популярным модулем под названием CSS Grid Layout, который позволяет строить двумерные сетки и создавать довольно удобные и гибкие пользовательские интерфейсы.
В рамках данного курса будут рассмотрены основные понятия, которые нужно освоить для дальнейшей работы и осознания того из чего состоят сетки. Также мы постепенно погрузимся в изучение работы различных свойств, предназначенных для создания grid контейнера, разметки и размеров колонок и рядов, именования grid линий и многих других возможностей для работы с grid элементами и grid контейнером.
По окончанию теоретической части, мы закрепим полученные знания из данного видеокурса и сверстаем макет при помощи технологии Grid.


Урок 1. CSS Grid Layout. Основная терминология и первая раскладка:
От автора: в этом видеоуроке мы разберем основные термины, которые необходимо понимать для дальнейшей работы с CSS Grid, а также создадим свою первую раскладку.
По результатам урока вы познакомитесь c понятиями grid контейнера, grid элементов, а также узнаете, из чего состоит сама сетка: grid линии, ряды, колонки, ячейки, области и grid интервалы. После чего, используя свойство grid-template-columns, создадим довольно простую сетку.


Урок 2. CSS Grid Layout. Свойства grid-template-columns и grid-temaplate-rows:
От автора: в этом уроке мы более подробно поговорим о возможностях создания колонок и рядов в сетке, рассмотрим использование возможных единиц измерения, а также ключевых слов и функций.
По результатам урока вы детальнее познакомитесь со свойствами grid-template-columns и grid-temaplate-rows, узнаете о новой единице измерения fraction, а также ключевых словах min-content, max-content и функции minmax.


Урок 3. CSS Grid Layout. Управление Grid-элементами:
От автора: в этом видео мы продолжаем изучение CSS Grid и перейдем к рассмотрению управления grid-элементами в сетке.
По результатам видео вы узнаете, как можно управлять град элементами при помощи таких свойств как grid-column-start, grid-column-end, grid-row-start и grid-row-end, а также их сокращенными вариантами grid-column, grid-row и grid-area.


Урок 4. CSS Grid Layout. Именования:
От автора: в данном видеоуроке мы рассмотрим различные примеры построения сеток, используя именованные колонки и ряды.
По результатам урока вы увидите, как привязывать Grid-элементы по именам, познакомитесь с ключевым словом Span, функцией Repeat и заданием интервалов между колонками и рядами.


Урок 5. CSS Grid Layout. Расположение элементов:
От автора: в этом уроке мы рассмотрим еще один, довольно классный, способ расположения элементов в сетке при помощи именования.
По результатам урока вы узнаете, как именовать элементы при помощи свойства grid-area, а также визуально представлять сетку и описывать каждый ее ряд, используя свойство grid-template-areas.


Урок 6. CSS Grid Layout. Выравнивание сетки и элементов CSS Grid:
От автора: в этом уроке мы рассмотрим возможности выравнивания сетки и элементов CSS Grid.
По результатам данного видео вы познакомитесь с такими свойствами как justify-content, align-content, justify-items и align-items, которые присущи для grid-контейнера, а также со свойствами, предназначенными для эгоистичного выравнивания grid-элементов align-self и justify-self.


Урок 7. CSS Grid Layout. Алгоритм авторазмещения:
От автора: в данном видеоуроке мы поговорим об алгоритме авторазмещения, направлении элементов, а также о порядке их вывода, и напоследок рассмотрим ключевые слова, позволяющие анализировать свободное пространство в grid-контейнере.
По итогу видео вы узнаете, как управлять направлением элементов при помощи свойства grid-auto-flow, а также заполнять свободное пространство, используя ключевое слово dense.


Урок 8. CSS Grid Layout. Обзор макета и создание HTML-структуры:
От автора: в данном уроке мы начинаем практическую часть, а именно верстку макета при помощи технологии CSS Grid.
По результатам видео вы ознакомитесь со структурой проекта и макетом, который предстоит верстать в последующих уроках, а также увидите описание HTML-структуры шаблона.


Урок 9. CSS Grid Layout. Стилизация шапки и блока с изображениями:
От автора: в этом уроке мы начнем стилизовать блок шапки и следующий за ним блок изображений.
В уроке создается сетка для шапки сайта и ее верстка, а также, с помощью технологии CSS Grid строится сетка для блока изображений.


Урок 10. CSS Grid Layout. Адаптация шапки и блока изображений:
От автора: в данном видеоуроке продолжается работа над шапкой и блоком изображений. В данном видео, используя медиазапросы, будет перестроена сетка и будут адаптированы блоки под необходимые разрешения.


Урок 11. CSS Grid Layout. Реализация блока с пользователем:
От автора: в данном видео Вы увидите реализацию блока с пользователем. В видео создается сетка для блока юзера и профиля, а также полностью стилизуются и адаптируются все необходимые элементы.


Урок 12. CSS Grid Layout. Стилизация блока галереи:
От автора: в текущем видео реализуется блок галереи. Вы увидите стилизацию блока галереи. Создается сетка без использования медиазапросов, при этом данный блок будет полностью адаптивным.


Урок 13. CSS Grid Layout. Реализация подвала и подведение итогов:
От автора в этом уроке завершается верстка макета и курс по CSS Grid в целом. В видео реализуется подвал, создается сетка для него. Подведение итогов.