Мета закинута
Автор не відписував в цілі 6 років 9 днів
Пройти новые курсы на HTML Academy
Год назад уже ставила подобную цель - пройти максимум курсов на HTML Academy. Она была выполнена успешно.
Но время идет, академия не спит и генерирует новое.
Критерій завершення
Все перечисленные курсы пройдены, законспектированы (здесь либо в другом более удобном месте)
-
Построение сеток
-
SVG
-
Основы JavaScript.
-
JavaScript в браузере
Щоденник мети
grid-template-areas
Cтроки в значении свойства grid-template-areas — визуальное представление рядов грида,
а значения в строках — представление столбцов.
Названия областей должны начинаться с буквы и могут включать цифры и дефис.
Названия в строках перечисляются через один или несколько пробелов.
Свойство grid-template-areas позволяет некоторые области помечать как пустые. Для этого вместо буквенного именования области используется символ точки .
grid-area - связывает визуальное представление с конкретными элементами в HTML
Обратим внимание, что название grid-area для каждого элемента должно быть уникальным.
Одному элементу в HTML может соответствовать только одна грид-область. Если одна грид-область задана нескольким HTML-элементам, действовать будет только одно, наиболее специфичное объявление.
ГРИДЫ
display: grid;
grid-column-start - с какой линии столбов начинается элемент
grid-column-end - на какой линии столбцов заканчивается элемент
grid-row-start - с какой линии рядом начинается элемент
grid-row-end - на какой линии рядов закачивается элемент
Значения могут быть как положительными (отчет начинается от начала, от первой линии столбцов или рядом), так и отрицательными (отсчет начинается с последней линии).
В случае пересечения координат двух элементов грида они просто располагаются один поверх другого в порядке следования в разметке.
На гриды действует z-index.
grid-column - сокращенное свойство, объединяет в себе сразу два свойства: grid-column-start / grid-column-end.
grid-row — сокращенное свойство для задания пары свойств: grid-row-start / grid-row-end.
Если в свойстве grid-row или grid-column не задать второй параметр, то значение останется валидным, но применится только первый параметр.
