CSS Grid Layout

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

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

• - Область статистики всегда появляется сразу под названием игры.
• - Игровое поле появляется справа от статистики и названия.
• - Верхняя часть названия игры и игровое поле всегда должны совпадать.
• - Нижняя часть игрового поля и нижняя часть области статистики совпадают, когда игра достигает минимальной высоты. Во всех остальных случаях игровое поле растягивается, чтобы использовать все доступное для него пространство.
• - Управление сосредоточено под игровой доской.
• - Верх области оценки выровнен по верху области управления.
• - Область оценки находится ниже области статистики.
• - Область очков выровнена с элементами управления под областью статистики.

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

/**
 * 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; }

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

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

Продолжая предыдущий пример, автор также хочет, чтобы игра адаптировалась к разным устройствам. Кроме того, игра должна оптимизировать расположение компонентов, если смотреть в книжной или альбомной ориентации (рисунки 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>

2. Обзор

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

• - фиксированные, гибкие и основанные на контенте функции определения размера треков
• - явное размещение элементов с помощью прямых (положительных) и обратных (отрицательных) числовых координат сетки, именованных линий сетки и именованных областей сетки; автоматическое размещение товара в пустых местах, включая изменение порядка элементов
• - чувствительное к пространству повторение дорожек и автоматическое добавление строк или столбцов для размещения дополнительного контента
• - управление выравниванием и интервалом с полями, желобами и свойствами выравнивания
• - возможность перекрытия контента и управления слоями с помощью z-index

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

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

• - Далее объявляет сетку с четырьмя названных областях: 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. Размещение предметов

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

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-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 свойств. Выравнивание и расстояние.

Следующий пример выравнивает все столбцы, распределяя между ними лишнее пространство, и центрирует сетку в контейнере сетки, когда она меньше, чем 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].