Grid Спецификация grid
 Скачать 0.56 Mb.
|
|
Grid Спецификация grid CSS Grid это новая модель для создания шаблонов, оптимизированная для создания двумерных макетов. Она идеально подходит для: шаблонов сайтов, форм, галерей и всего, что требует адаптивности. CSS Grid Layout представляет двумерную сетку для CSS. Grid - набор пересекающихся горизонтальных и вертикальных линий - один набор определяет столбцы, а другой строки. Спецификация grid Концепция сетки Спецификация grid • Сетка (grid) - набор пересекающихся горизонтальных и вертикальных линий, делящих пространство grid-контейнера на области сетки, в которые могут быть помещены элементы сетки • Линии сетки (grid lines) - невидимые горизонтальные и вертикальные разделительные линии , существующие по обе стороны от строки и столбца. На них можно ссылаться по числовому индексу или имени, заданному в CSS-коде • Дорожка сетки (grid track) - пространство между двумя соседними линиями сетки, используется для определения либо столбца, либо строки сетки. Дорожка идет от одного края контейнера к другому, размер зависит от расположения линий сетки, которые ее определяют. Спецификация grid • Ячейка сетки (grid cell) - пространство, ограниченное четырьмя линиями сетки, аналогично ячейке таблицы. Ячейка сетки — это область, в которой можно разместить контент. Это наименьшая единица сетки, на которую можно ссылаться при позиционировании элементов сетки. К ячейкам сетки нельзя обращаться напрямую с помощью CSS-свойств. • Область сетки (grid area) - прямоугольная область, ограниченная четырьмя линиями сетки и состоящая из одной или нескольких соседних ячеек. Область может быть размером от одной ячейки до всех ячеек сетки. • Элементы сетки (grid items) - отдельные элементы, которые назначаются области сетки (или ячейке сетки). Каждый контейнер-сетка включает ноль и более элементов сетки ; каждый дочерний элемент контейнера-сетки автоматически становится элементом сетки. Позициониование элементов grid Контейнер - сетка Блок , который устанавливает контекст форматирования по типу сетки, то есть создает область с сеткой, а дочерние элементы располагаются в соответствии с правилами компоновки сетки, а не блочной компоновки Свойство display: grid (генерирует grid-контейнер уровня блока) и display: inline-grid (grid-контейнер уровня строки ) По умолчанию сетка имеет один столбец и одну строку, которые занимают полный размер контейнера. Позициониование элементов grid Количество строк/столбцов Свойство grid-template-rows (определяет количество строк) и grid-template-columns (определяет количество столбцов ) Значения свойств - последовательность размера дорожек в единицах длины Размер дорожек может быть задан с помощью любой единицы длины (абсолютной и относительной) Гибкие размеры дорожек: единица измерения fr Единица fr представляет собой долю доступного пространства в grid-контейнере. Общий размер фиксированных строк или столбцов вычитается из доступного пространства контейнера-сетки. Оставшееся пространство делится между строками и столбцами с гибкими размерами пропорционально их коэффициенту Позициониование элементов grid Количество строк/столбцов Свойство grid-template-rows (определяет количество строк) и grid-template-columns (определяет количество столбцов ) Значения свойств - последовательность размера дорожек в единицах длины Размер дорожек может быть задан с помощью любой единицы длины (абсолютной и относительной) Гибкие размеры дорожек: единица измерения fr Единица fr представляет собой долю доступного пространства в grid-контейнере. Общий размер фиксированных строк или столбцов вычитается из доступного пространства контейнера-сетки. Оставшееся пространство делится между строками и столбцами с гибкими размерами пропорционально их коэффициенту Позициониование элементов grid Повтор строк и столбцов Нотация repeat() - повторяющийся фрагмент списка дорожек Синтаксис : repeat(количество повторений (число или auto-fill/auto-fit), повторяющаяся дорожка(размер дорожки )) Пример : grid-template-rows: repeat(3, 200px) Позициониование элементов grid Масштабирование дорожек Функция minmax() - диапазон размеров, больше или равный min и меньше или равный max. Синтаксис : minmax(min, max) Пример : grid-template-rows: 200px minmax(100px, 1fr) Позициониование элементов grid Именованные области Свойство grid-template-areas — определяет именованные области сетки, которые не связаны с каким-либо конкретным элементом сетки, но на которые можно ссылаться из свойств размещения сетки. Значение - строка ( последовательность идентификаторов, определяющая, как должны отображаться строки и столбцы) Позициониование элементов grid Краткая запись сетки Свойство grid-template — сокращение для установки grid-template-rows, grid-template-columns и grid-template-areas в одном объявлении. Значения : • grid-template-rows/grid-template-columns - Устанавливает grid-template-rows и значение grid-template-columns в указанные значения, а grid-template-areas в значение none. • имена линий сетки или последовательность идентификаторов, заключенная в кавычки и размер дорожки или именованные линии сетки или + /явный список дорожек - Устанавливает grid-template-areas для перечисленных последовательностей идентификаторов. Устанавливает для grid-template-rows указанные значения размеров дорожек, следующие за каждой последовательностью идентификаторов (выставляя auto для любых отсутствующих размеров), и объединяет в именованных линиях сетки, определенных до / после каждого размера. Устанавливает grid-template-columns в список дорожек, указанный после косой черты (или ни одного, если не указан). Позициониование элементов grid Краткая запись сетки Свойство grid-template — сокращение для установки grid-template-rows, grid-template-columns и grid-template-areas в одном объявлении. Значения : • grid-template-rows/grid-template-columns - Устанавливает grid-template-rows и значение grid-template-columns в указанные значения, а grid-template-areas в значение none. • имена линий сетки или последовательность идентификаторов, заключенная в кавычки и размер дорожки или именованные линии сетки или + /явный список дорожек - Устанавливает grid-template-areas для перечисленных последовательностей идентификаторов. Устанавливает для grid-template-rows указанные значения размеров дорожек, следующие за каждой последовательностью идентификаторов (выставляя auto для любых отсутствующих размеров), и объединяет в именованных линиях сетки, определенных до / после каждого размера. Устанавливает grid-template-columns в список дорожек, указанный после косой черты (или ни одного, если не указан). Позициониование элементов grid Неявная сетка • Автоматические дорожки сетки - добавляются, если элемент сетки расположен в строке или столбце, размер которых не определен явно свойствами grid-template-row или grid-template-column, для хранения этого элемента. По умолчанию такие дорожки имеют минимальный необходимый размер. Свойства grid-auto-rows и grid-auto-columns позволяют контролировать размер неявных дорожек сетки. Значение - любое допустимое значение для задания размеров дорожек сетки. Позициониование элементов grid Неявная сетка • Автоматическое размещение - элементы сетки, которые не размещены явно, автоматически помещаются в незанятое пространство в контейнере-сетке с помощью алгоритма автоматического размещения. Свойство grid-auto-flow управляет автоматическим размещением элементов сетки без явного положения (полезно при создании галерей, если для изображений не задан порядок, в котором они должны быть расположены ). Значения: - row - алгоритм автоматического размещения размещает элементы, заполняя каждую строку по очереди слева-направо, добавляя новые строки по мере необходимости (значение по умолчанию) - column - алгоритм размещает элементы, заполняя каждый столбец по очереди сверху-вниз, добавляя новые столбцы по мере необходимости. - dense - алгоритм "плотной" укладки элементов. При необходимости может менять порядок следования элементов, заполняя пустые места более крупными элементами Позициониование элементов grid Размещение и переупорядочивание элементов сетки • Размещение с помощью линий сетки. Положение элементов сетки определяется расположением линий сетки и диапазоном сетки - количеством занимаемых дорожек сетки. По умолчанию элемент сетки занимает одну дорожку на каждой оси. Свойства размещения на сетке - grid-row-start , grid-row-end , grid-column-start , grid-column-end (сокращенно grid-row , grid-column , grid-area) позволяют определить размещение элемента сетки. Значения: имя линии Начальная и конечная линия строки/столбца задаются в именованных линий сетки. целое число и имя линии Начальная и конечная линия строки/столбца задаются с помощью целого числа (отрицательное порядковый номер линии сетки будет отсчитываться с противоположного края явной сетки) и (необязательно) имени линии. span и целое число или имя линии Ключевое слово span и целое положительное число/имя линии задают диапазон ячеек для размещения элемента сетки. Позициониование элементов grid Размещение и переупорядочивание элементов сетки • Именованные линии сетки. Линии могут быть названы явно в свойствах grid-template-rows и grid-template-columns или неявно путем создания именованных областей сетки в свойстве grid-template-areas. Имя линии может быть любым, при указании в значении свойства оно заключается в квадратные скобки. В качестве имени линии нельзя использовать слово span. Позициониование элементов grid Выравнивание элементов сетки Для выравнивания элементов сетки можно использовать свойство margin. По умолчанию элементы сетки растягиваются , чтобы заполнить свою область сетки. • Выравнивание с помощью margin: auto При расчете размеров дорожек сетки margin: auto обрабатываются как 0. • Выравнивание по оси строки Элементы сетки могут быть выровнены в направлении оси строки с помощью свойства justify-self или justify-items • Выравнивание по оси столбца Элементы сетки могут выровнены в направлении, перпендикулярном оси строки с помощью свойства align-self или align-items Позициониование элементов grid Промежутки между элементами сетки Свойства row-gap и column-gap (сокращенная запись gap) определяют промежутки между строками и столбцами сетки. При определении размера дорожки каждый промежуток рассматривается как дополнительная пустая дорожка указанного размера. Промежутки добавляются только между двумя дорожками сетки, то есть они не добавляются перед первой и после последней дорожки. Значения - длина или % (относительно размеров области сетки), normal - вычисляется как 0px (значение по умолчанию ) |