Сетка Grid в CSS

Модуль CSS Grid Layout

Строки и колонки — основа системы раскладки на основе сетки, которую предоставляет модуль CSS Grid Layout.

С ним сложные веб-раскладки строятся легко.

Возможны и адаптивные раскладки, для которых не нужны ни float, ни position.

Grid против Flexbox: Они различаются числом измерений. Flexbox располагает содержимое в одном, строки ИЛИ колонки, тогда как CSS Grid располагает его в двух, строки И колонки.

Grid-раскладка с именованными областями

Здесь CSS Grid и именованные grid-области строят полную раскладку страницы, состоящую из заголовка, меню, области основного содержимого, правой секции и футера.

Prompt
Создайте раскладку страницы с использованием CSS Grid с именованными grid-областями: заголовок, растянутый на всю ширину, левое меню, область основного содержимого и правую секцию, а также футер, растянутый на всю ширину. Используйте grid-template-areas для определения раскладки. Заполните каждую область примерным текстом.
Output: complete HTML page

Компоненты CSS Grid

Любая сетка состоит из двух частей:

  • Grid-контейнер - родительский элемент, у которого свойство display имеет значение grid или inline-grid.
  • Один или несколько grid-элементов - любой прямой дочерний элемент контейнера автоматически становится grid-элементом.

Grid-контейнер с пятью grid-элементами

В примере ниже синяя область — это grid-контейнер, в котором находятся пять grid-элементов.

Примечание: В следующих главах grid-контейнеры и grid-элементы рассматриваются подробнее.

Пример

Пять grid-элементов заполняют три колонки внутри одного grid-контейнера.

Prompt
Создайте grid-контейнер с пятью дочерними элементами, пронумерованными от 1 до 5. Установите для контейнера отображение grid с тремя равными колонками, используя grid-template-columns. Добавьте промежуток (gap) между элементами и задайте контейнеру и элементам заметные цвета фона и отступы.
Output: complete HTML page

Все свойства CSS Grid

Все свойства CSS Grid приведены в таблице ниже.

Справочник свойств CSS Grid

index.html 
<table>
  <tr>
    <th>Property</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>align-content</td>
    <td>Vertically aligns the whole grid inside the container (when total grid size is smaller than container)</td>
  </tr>
  <tr>
    <td>align-items</td>
    <td>Specifies the default alignment for items inside a flexbox or grid container</td>
  </tr>
  <tr>
    <td>align-self</td>
    <td>Aligns the content for a specific grid item along the column axis</td>
  </tr>
  <tr>
    <td>display</td>
    <td>Specifies the display behavior (the type of rendering box) of an element</td>
  </tr>
  <tr>
    <td>column-gap</td>
    <td>Specifies the gap between the columns</td>
  </tr>
  <tr>
    <td>gap</td>
    <td>A shorthand property for the row-gap and the column-gap properties</td>
  </tr>
  <tr>
    <td>grid</td>
    <td>A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties</td>
  </tr>
  <tr>
    <td>grid-area</td>
    <td>Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties</td>
  </tr>
  <tr>
    <td>grid-auto-columns</td>
    <td>Specifies a default column size</td>
  </tr>
  <tr>
    <td>grid-auto-flow</td>
    <td>Specifies how auto-placed items are inserted in the grid</td>
  </tr>
  <tr>
    <td>grid-auto-rows</td>
    <td>Specifies a default row size</td>
  </tr>
  <tr>
    <td>grid-column</td>
    <td>A shorthand property for the grid-column-start and the grid-column-end properties</td>
  </tr>
  <tr>
    <td>grid-column-end</td>
    <td>Specifies where to end the grid item</td>
  </tr>
  <tr>
    <td>grid-column-start</td>
    <td>Specifies where to start the grid item</td>
  </tr>
  <tr>
    <td>grid-row</td>
    <td>A shorthand property for the grid-row-start and the grid-row-end properties</td>
  </tr>
  <tr>
    <td>grid-row-end</td>
    <td>Specifies where to end the grid item</td>
  </tr>
  <tr>
    <td>grid-row-start</td>
    <td>Specifies where to start the grid item</td>
  </tr>
  <tr>
    <td>grid-template</td>
    <td>A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties</td>
  </tr>
  <tr>
    <td>grid-template-areas</td>
    <td>Specifies how to display columns and rows, using named grid items</td>
  </tr>
  <tr>
    <td>grid-template-columns</td>
    <td>Specifies the size of the columns, and how many columns in a grid layout</td>
  </tr>
  <tr>
    <td>grid-template-rows</td>
    <td>Specifies the size of the rows in a grid layout</td>
  </tr>
  <tr>
    <td>justify-content</td>
    <td>Horizontally aligns the whole grid inside the container (when total grid size is smaller than container)</td>
  </tr>
  <tr>
    <td>justify-self</td>
    <td>Aligns the content for a specific grid item along the row axis</td>
  </tr>
  <tr>
    <td>place-self</td>
    <td>A shorthand property for the align-self and the justify-self properties</td>
  </tr>
  <tr>
    <td>place-content</td>
    <td>A shorthand property for the align-content and the justify-content properties</td>
  </tr>
  <tr>
    <td>row-gap</td>
    <td>Specifies the gap between the grid rows</td>
  </tr>
</table>