Глава 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 минут