Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ: АрхеологияБиология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия Экология ТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Глава 6.2.6. Именованные грид-линии
Вернёмся к грид-линиям. Когда мы задавали координаты для грид-элементов, мы обращались к грид-линиям по номерам: .header { grid-column: 1 / 5; /* элемент располагается с первой грид-линии до пятой */}Это не всегда удобно. Когда рядов и колонок становится больше, хочется большей явности, например, задать определённой линии не безликий номер, а явное имя. И такая возможность в гридах есть — грид-линиям можно задавать имена. Давайте возьмём для примера раскладку, которую рассматривали раньше. <div class="grid"> <header class="header"> </header> <main class="main"> </main> <aside class="aside"> </aside> <footer class="footer"> </footer></div>.grid { display: grid; grid-template-columns: 100px 100px 100px 100px; grid-template-rows: 100px 100px 100px 100px; width: 400px; height: 400px;}.header { grid-column: 1 / 5;}.main { grid-column: 1 / 4; grid-row: 2 / -2;}.aside { grid-row: 2 / -2;}.footer { grid-column: 1 / 5;}Пример раскладки В раскладке мы задаём координаты грид-элементам по номерам грид-линий, например так: .main { grid-column: 1 / 4; /* элемент с первой линии до четвёртой */ grid-row: 2 / -2; /* элемент со второй линии до предпоследней */}Давайте теперь изменим пример и в изначальной раскладке грида пропишем также названия грид-линий для области грид-элемента.main. В имени могут использоваться любые буквы, латиница, кириллица, символы юникода и так далее. Имена записываются в квадратных скобках через дефис внутри свойств grid-template-columns и grid-template-rows. «Стартовые» линии рядов назовём [content-column-start] и [content-row-start], а «конечные» — [content-column-end] и [content-row-end]. .grid { … grid-template-columns: [content-column-start] 100px 100px 100px [content-column-end] 100px; grid-template-rows: 100px [content-row-start] 100px 100px [content-row-end] 100px; …}Назвали линии Теперь при прописывании координат грид-элементов мы можем опираться не только на номера грид-линий, но ещё и их имена: .main { /* элемент начинается с линии «content-column-start» и идёт до линии «content-column-end» */ grid-column: content-column-start / content-column-end; /* элемент начинается с линии «content-row-start» и идёт до линии «content-row-end» */ grid-row: content-row-start / content-row-end;}Именованными линиями мы можем пользоваться не только для задания координат грид-элемента.main, но и для остальных грид-элементов: .header { grid-column: 1 / 5; /* элемент идёт с первой линии до линии «content-row-start» */ grid-row: 1 / content-row-start;}.aside { /* элемент идёт с линии «content-row-start» до линии «content-row-end» */ grid-row: content-row-start / content-row-end;}.footer { /* элемент идёт с линии «content-row-end» до пятой линии */ grid-row: content-row-end / 5; grid-column: 1 / 5;}Именованными линиями также можно пользоваться не только в свойствах grid-row-start/grid-row-end/grid-row и grid-column-start/grid-column-end/grid-column.
Рассмотрим пример. Здесь обозначены линии по обеим осям, которые «открывают» и «закрывают» контент — они называются [content-start] и [content-end]. .grid { display: grid; grid-template-columns: 100px [content-start] 100px [content-end]; grid-template-rows: 50px [content-start] 200px [content-end] 50px;}.content { /* мы назвали линии единообразно и между линий автоматически появилась грид-область с соответствующим линиям названием */ grid-area: content;}Грид-область, которая появилась из-за правильно названных линий
Теория~ 2 минуты Глава 6.2.7. Грид-интервал Собственными гридовыми инструментами можно задать равномерные отступы между рядами и между столбцами. { gap: 10px; /* интервал в 10px появится между всеми элементами */ row-gap: 10px; /* интервал в 10px появится только между рядами */ column-gap: 20px; /* интервал в 20px появится только между столбцами */ gap: 10px 20px; /* интервал между рядами — 10px, между столбцами — 20px */}В более ранних спецификациях эти свойства имеют приставку grid- в начале (grid-column-gap, grid-row-gap, grid-gap), сейчас работают оба вариант свойств. У грид-интервалов есть особенности: промежутки появляются между элементами и не появляются по краям контейнера. Грид с интервалами. Интервалы появились только внутри грида Если задать элементам внешние отступы (margin), они не будут «схлопываться» с грид-интервалами. То есть для сочетания gap: 10px; margin-right: 30px; общий отступ будет 40 пикселей. Отдельные грид-элементы, разделённые грид-интервалами и имеющие собственные внешние отступы, никак внутри грида не связаны, и их отступы также не схлопываются. Получается, что два элемента рядом со внешними отступами со всех сторон по 10px в гриде с интервалом в 5px будут отодвинуты друг от друга на 25 пикселей. Грид-элементы не взаимодействуют друг с другом, и их отступы не схлопываются Мы расмотрели задание величины интревалов в абсолютных единицах px. Возможно также задание размеров интервалов в относительных единицах em/rem или vw. Теория~ 5 минут
|
|||||
Последнее изменение этой страницы: 2021-01-14; просмотров: 106; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.137.161.251 (0.007 с.) |