Вы здесь

CSS Grid Layout

Оглавление

1. Введение

Метод CSS определяет двухмерную систему компоновки на основе сетки, оптимизированную для проектирования пользовательского интерфейса. В модели макета сетки дочерние элементы контейнера сетки могут быть расположены в произвольных слотах в предопределенной гибкой сетке макета или фиксированного размера. Grid Layout - это новая модель макета для CSS, которая обладает мощными возможностями для управления размерами и позиционированием блоков и их содержимого. В отличие от Flexible Box Layout который ориентирован на одну ось, сеточный макет оптимизирован для двухмерных макетов: тех, в которых выравнивание содержимого желательно в обоих измерениях.
1. Пример Flex макета
2. Пример Grid макета

Кроме того, благодаря своей способности явно размещать элементы в сетке, Grid Layout позволяет кардинально преобразовывать структуру визуального макета, не требуя соответствующих изменений разметки. Комбинируя MediaQueries со свойствами CSS, которые управляют макетом контейнера сетки и его дочерних элементов, авторы могут адаптировать свой макет к изменениям форм-факторов устройства, ориентации и доступного пространства, сохраняя при этом более идеальную семантическую структуру своего контента в презентациях.

Хотя многие макеты могут быть сделаны с помощью Grid или Flexbox, у каждого есть свои особенности. Сетка обеспечивает двухмерное выравнивание, использует нисходящий подход к макету, допускает явное наложение элементов и обладает более мощными связующими возможностями. Flexbox фокусируется на распределении пространства внутри оси, использует более простой восходящий подход к макету, может использовать систему переноса строк на основе размера контента для управления своей вторичной осью и опирается на базовую иерархию разметки для построения более сложных макетов. Ожидается, что оба будут полезными и дополнительными инструментами для авторов CSS.

1.1 Фон и мотивация.

Изображение: Пример компоновки приложения, требующий горизонтального и вертикального выравнивания.
3. компоновки приложения, требующий горизонтального и вертикального выравнивания.

Поскольку веб-сайты превратились из простых документов в сложные интерактивные приложения, методы макета документов, например плавающие объекты, не всегда хорошо подходили для макета приложения. Используя комбинацию таблиц, JavaScript или тщательных измерений для плавающих элементов, авторы нашли обходные пути для достижения желаемых макетов. Макеты, которые адаптировались к доступному пространству, часто были хрупкими и приводили к нелогичному поведению, поскольку пространство становилось ограниченным. В качестве альтернативы авторы многих веб-приложений выбрали фиксированную компоновку, которая не может использовать изменения доступного пространства рендеринга на экране.

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

1.1.1. Адаптация макетов к доступному пространству.

Давайте рассмотрим расположение игры в две колонки и три строки: название игры в верхнем левом углу, меню под ним и счет в левом нижнем углу с игровой доской, занимающей верхнюю и среднюю ячейки справа, а затем по игровому управлению заполняя нижний левый.  Размер левого столбца точно соответствует его содержанию (название игры, пункты меню и счет), а правый столбец заполняет оставшееся пространство.
4. Пять элементов сетки расположены в соответствии с размером контента и доступным пространством.
Поскольку на больших экранах становится больше места, средний ряд / правый столбец могут расширяться, чтобы заполнить это пространство.
5. Рост в сетке за счет увеличения доступного пространства.
Макет сетки можно использовать для интеллектуального изменения размера элементов на веб-странице. Смежные фигуры представляют игру с пятью основными компонентами в макете: название игры, область статистики, игровое поле, область счета и область управления. Цель автора - разделить пространство для игры таким образом, чтобы:
  • - Область статистики всегда появляется сразу под названием игры.
  • - Игровое поле появляется справа от статистики и названия.
  • - Верхняя часть названия игры и игровое поле всегда должны совпадать.
  • - Нижняя часть игрового поля и нижняя часть области статистики совпадают, когда игра достигает минимальной высоты. Во всех остальных случаях игровое поле растягивается, чтобы использовать все доступное для него пространство.
  • - Управление сосредоточено под игровой доской.
  • - Верх области оценки выровнен по верху области управления.
  • - Область оценки находится ниже области статистики.
  • - Область очков выровнена с элементами управления под областью статистики.

В следующем примере макета сетки показано, как автор может декларативно выполнить все правила определения размера, размещения и выравнивания.

Пример 1
/** * Define the space for each grid item by declaring the grid * on the grid container. */ #grid { /** * Two columns: * 1. the first sized to content, * 2. the second receives the remaining space * (but is never smaller than the minimum size of the board * or the game controls, which occupy this column [Figure 4]) * * Three rows: * 3. the first sized to content, * 4. the middle row receives the remaining space * (but is never smaller than the minimum height * of the board or stats areas) * 5. the last sized to content. */ display: grid; grid-template-columns: /* 1 */ auto /* 2 */ 1fr; grid-template-rows: /* 3 */ auto /* 4 */ 1fr /* 5 */ auto; } /* Specify the position of each grid item using coordinates on * the 'grid-row' and 'grid-column' properties of each grid item. */ #title { grid-column: 1; grid-row: 1; } #score { grid-column: 1; grid-row: 3; } #stats { grid-column: 1; grid-row: 2; align-self: start; } #board { grid-column: 2; grid-row: 1 / span 2; } #controls { grid-column: 2; grid-row: 3; justify-self: center; }
<div id="grid">
  <div id="title">Game Title</div>
  <div id="score">Score</div>
  <div id="stats">Stats</div>
  <div id="board">Board</div>
  <div id="controls">Controls</div>
</div>

Примечание. Существует несколько способов задания структуры сетки, а также позиционирования и размера элементов сетки, каждый из которых оптимизирован для различных сценариев.

See the Pen grid example 1 by alexsco74 (@alexsco74) on CodePen.

1.1.2. Источник-порядок независимости

Изображение: расположение, подходящее для портретной ориентации.
6. Расположение, подходящее для «портретной» ориентации.
Изображение: расположение, подходящее для альбомной ориентации.
7. Расположение подходит для «ландшафтной» ориентации.

Продолжая предыдущий пример, автор также хочет, чтобы игра адаптировалась к разным устройствам. Кроме того, игра должна оптимизировать расположение компонентов, если смотреть в книжной или альбомной ориентации (рисунки 6 и 7). Комбинируя компоновку сетки с медиазапросами, автор может использовать одну и ту же семантическую разметку, но изменить компоновку элементов независимо от их исходного порядка, чтобы добиться желаемой компоновки в обеих ориентациях.

В следующем примере используется возможность расположения сетки в качестве имени пространства, которое будет занимать элемент сетки. Это позволяет автору избегать переписывания правил для элементов сетки при изменении определения сетки.

Пример 2.
@media (orientation: portrait) { #grid { display: grid; /* The rows, columns and areas of the grid are defined visually * using the grid-template-areas property. Each string is a row, * and each word an area. The number of words in a string * determines the number of columns. Note the number of words * in each string must be identical. */ grid-template-areas: "title stats" "score stats" "board board" "ctrls ctrls"; /* The way to size columns and rows can be assigned with the * grid-template-columns and grid-template-rows properties. */ grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr auto; } } @media (orientation: landscape) { #grid { display: grid; /* Again the template property defines areas of the same name, * but this time positioned differently to better suit a * landscape orientation. */ grid-template-areas: "title board" "stats board" "score ctrls"; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; } } /* The grid-area property places a grid item into a named * area of the grid. */ #title { grid-area: title } #score { grid-area: score } #stats { grid-area: stats } #board { grid-area: board } #controls { grid-area: ctrls }
<div id="grid">
  <div id="title">Game Title</div>
  <div id="score">Score</div>
  <div id="stats">Stats</div>
  <div id="board">Board</div>
  <div id="controls">Controls</div>
</div>

See the Pen aPYBBP by alexsco74 (@alexsco74) on CodePen.

Примечание. Возможности переупорядочения макета сетки преднамеренно влияют только на визуальный рендеринг, оставляя речевой порядок и навигацию в зависимости от исходного порядка. Это позволяет авторам манипулировать визуальным представлением, оставляя исходный порядок нетронутым и оптимизированным для UA не-CSS и для линейных моделей, таких как речь и последовательная навигация.
Размещение и переупорядочение элементов сетки не должны использоваться в качестве замены для правильного упорядочения источника, поскольку это может нарушить доступность документа.

2. Обзор

Этот раздел не является нормативным.

Макет сетки управляет макетом его содержимого с помощью сетки: пересекающегося набора горизонтальных и вертикальных линий, которые создают систему координат для определения размера и расположения содержимого контейнера сетки . Возможности макета сетки:

Грид-контейнеры могут быть вложены или смешаны с гибкими контейнерами по мере необходимости для создания более сложных макетов.

2.1. Объявление сетки

Пример 3. Ниже приведены некоторые примеры объявлений сетки:
  • - Далее объявляет сетку с четырьмя названных областях: H, A, B, и F. Размер первого столбца соответствует его содержимому ( авто ), а второй столбец занимает оставшееся пространство ( 1fr ). По умолчанию для строк используется автоматическое (основанное на контенте) определение размера; последний ряд имеет фиксированный размер 30 пикселей.
main { grid: "H H " "A B " "F F " 30px / auto 1fr; }

See the Pen exmaple3.1 by alexsco74 (@alexsco74) on CodePen.

  • - Следующее объявляет сетку с таким количеством строк по крайней мере 5em, которое поместится в высоте контейнера сетки ( 100vh ). Сетка не имеет явных столбцов; вместо того, чтобы столбцы добавлялись по мере добавления контента, результирующие ширины столбцов выравнивались ( 1fr ). Поскольку содержимое, переполненное вправо, не будет печататься, альтернативный макет для печати добавляет строки.
    main { grid: repeat(auto-fill, 5em) / auto-flow 1fr; height: 100vh; } @media print { main { grid: auto-flow 1fr / repeat(auto-fill, 5em); } }
  • - Следующее объявляет сетку с 5 столбцами одинакового размера и тремя рядами, причем средний ряд занимает все оставшееся пространство (и, по крайней мере, достаточно, чтобы вместить его содержимое).
    main { grid: auto 1fr auto / repeat(5, 1fr); min-height: 100vh; }

2.2. Размещение предметов

Содержимое контейнера сетки организованы в отдельные элементы сетки (аналогичные гибкие элементы), которые затем назначены предопределенные области в сетке. Они могут быть явно размещены с использованием координат через свойства размещения сетки или неявно размещены в пустых областях с помощью автоматического размещения. Размещение элементов сетки.

Пример 4.
Ниже приведены некоторые примеры объявлений размещения сетки с использованием сокращенной области сетки:
grid-area: a; /* Place into named grid area “a” */ grid-area: auto; /* Auto-place into next empty area */ grid-area: 2 / 4; /* Place into row 2, column 4 */ grid-area: 1 / 3 / -1; /* Place into column 3, span all rows */ grid-area: header-start / sidebar-start / footer-end / sidebar-start; /* Place using named lines */

Они эквивалентны следующим объявлениям grid-row + grid-column:

grid-row: a; grid-column: a; grid-row: auto; grid-column: auto; grid-row: 2; grid-column: 4; grid-row: 1 / -1; grid-column: 3; grid-row: header-start / footer-end; grid-column: sidebar-start / footer-end;
Они могут быть далее разложены на длинные строки grid-row-start / grid-row-end / grid-column-start / grid-column-end, например
grid-area: a; /* Equivalent to grid-row-start: a; grid-column-start: a; grid-row-end: a; grid-column-end: a; */ grid-area: 1 / 3 / -1; /* Equivalent to grid-row-start: 1; grid-column-start: 3; grid-row-end: -1; grid-column-end: auto; */

2.3. Определение размера сетки

После того , как предметы сетки были размещены, размеры сетки дорожек (строки и столбцы) вычисляется, что составляет размеры их содержания и / или свободного пространства, как указано в определении сетки.

В результате чего размер сетки выровнены в пределах контейнера сетки в соответствии с сеткой контейнера «ами align-content и justify-content свойств. Выравнивание и расстояние.

Пример 5.

Следующий пример выравнивает все столбцы, распределяя между ними лишнее пространство, и центрирует сетку в контейнере сетки, когда она меньше, чем 100vh.

main { grid: auto-flow 1fr / repeat(auto-fill, 5em); min-height: 100vh; justify-content: space-between; align-content: safe center; }

Наконец каждый элемент сетки имеет такие размеры и выровнены в пределах своей назначенной области сетки, как указано в его собственном проклейки [CSS21]и свойства выравнивания [CSS-ALIGN-3].