W3docs
ru
Войти

CSS свойство grid

Изучите сокращённое свойство CSS grid: синтаксис, формы значений, единицы fr, именованные области, auto-flow и примеры макетов.

Свойство CSS grid — это сокращённая запись, позволяющая определить всю раскладку CSS Grid в одном объявлении. Оно устанавливает следующие шесть подсвойств одновременно на контейнере сетки:

  • grid-template-rows — высоты явных строк
  • grid-template-columns — ширины явных столбцов
  • grid-template-areas — именованные области макета
  • grid-auto-rows — высота неявно создаваемых строк
  • grid-auto-columns — ширина неявно создаваемых столбцов
  • grid-auto-flow — направление, в котором добавляются автоматически размещаемые элементы

Свойство grid применяется только к контейнеру сетки — элементу с display: grid или display: inline-grid.

Важно: Любое подсвойство, не упомянутое в объявлении grid, сбрасывается до начального значения. В этом ключевое отличие от раздельного задания подсвойств — grid всегда начинает с чистого листа.

Явные и неявные треки

Понимание этого различия — ключ к чтению любого значения grid:

  • Явные треки — это строки и столбцы, которые вы задаёте вручную. Символ / в значении разделяет строки (слева) и столбцы (справа): grid: 100px 200px / 1fr 1fr означает две явные строки и два явных столбца.
  • Неявные треки — дополнительные строки или столбцы, которые браузер создаёт автоматически, когда элементов больше, чем может вместить явная сетка. grid-auto-rows / grid-auto-columns задают их размеры, а grid-auto-flow определяет, будут ли лишние элементы помещаться в новые строки (по умолчанию) или в новые столбцы.

В одном сокращении grid можно указать либо явные свойства, либо неявные — но не оба варианта одновременно.

Единица fr

В раскладках сетки часто используется fr (дробная единица). 1fr означает «одна доля доступного пространства». Три столбца, определённые как 1fr 1fr 1fr, каждый получает треть ширины контейнера. Можно также смешивать fr с фиксированными размерами: 200px 1fr даёт первому столбцу 200 пкс, а второму — всё оставшееся пространство.

Синтаксис

/* Keyword */
grid: none;

/* Explicit rows / columns */
grid: <grid-template-rows> / <grid-template-columns>;

/* Template areas */
grid: <grid-template>;

/* Implicit rows, explicit columns */
grid: [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>;

/* Explicit rows, implicit columns */
grid: <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>?;

/* Global values */
grid: inherit;
grid: initial;
grid: unset;

Нотация && означает, что оба ключевых слова должны присутствовать; их порядок не важен. Знак ? означает, что элемент является необязательным.

Начальное значениеnone
Применяется кКонтейнерам сетки
НаследуетсяНет
АнимируемоеДа (раскладка сетки анимируема)
Версия CSSCSS Grid Layout Module Level 1
DOM синтаксисelement.style.grid = "100px / 1fr 1fr"

Формы значений

ЗначениеЧто делает
noneУбирает все явные шаблоны; все подсвойства сбрасываются до начальных.
<template-rows> / <template-columns>Задаёт явные треки строк и столбцов.
<grid-template>Сокращение для grid-template-rows, grid-template-columns и grid-template-areas.
<template-rows> / auto-flow [dense] [<auto-cols>]Явные строки; столбцы генерируются автоматически. Добавьте dense для заполнения пустот.
auto-flow [dense] [<auto-rows>] / <template-cols>Строки генерируются автоматически; столбцы явные.
initialСбрасывает свойство до значения по умолчанию (none).
inheritНаследует вычисленное значение от родительского элемента.

Примеры

Пример 1: Базовая явная сетка

grid: 100px / auto auto auto создаёт одну явную строку высотой 100 пкс и три столбца одинаковой ширины auto. Девять блоков выходят за пределы в дополнительные неявные строки (авторазмер):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid: 100px / auto auto auto;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-box {
        background-color: #eee;
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 30px;
        font-size: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box">1</div>
      <div class="grid-box">2</div>
      <div class="grid-box">3</div>
      <div class="grid-box">4</div>
      <div class="grid-box">5</div>
      <div class="grid-box">6</div>
      <div class="grid-box">7</div>
      <div class="grid-box">8</div>
      <div class="grid-box">9</div>
    </div>
  </body>
</html>
Попробуйте сами »

Пример 2: Auto-flow по столбцам

grid: auto auto / auto-flow задаёт две явные строки и указывает браузеру автоматически генерировать столбцы при размещении элементов. Каждый элемент перетекает в новый столбец, пока все элементы не будут размещены, заполняя обе строки столбец за столбцом.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid: auto auto / auto-flow;
        gap: 5px;
        background-color: #1c87c9;
        padding: 10px;
      }
      .grid-container > div {
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box1">1</div>
      <div class="grid-box2">2</div>
      <div class="grid-box3">3</div>
      <div class="grid-box4">4</div>
    </div>
  </body>
</html>
Попробуйте сами »
Пример свойства CSS grid

Пример 3: Явное размещение элементов с помощью grid-area

Каждый блок позиционируется с помощью grid-area в синтаксисе row-start / column-start / row-end / column-end поверх шаблона grid: 100px / auto auto auto:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .grid-box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .grid-box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .grid-box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .grid-box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .grid-box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .grid-container {
        display: grid;
        grid: 100px / auto auto auto;
        gap: 10px;
        background-color: #1c87c9;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box1">1</div>
      <div class="grid-box2">2</div>
      <div class="grid-box3">3</div>
      <div class="grid-box4">4</div>
      <div class="grid-box5">5</div>
      <div class="grid-box6">6</div>
    </div>
  </body>
</html>
Попробуйте сами »

Пример 4: Единицы fr для гибких столбцов

Использование единиц fr — наиболее распространённый паттерн для адаптивных сеток. Три столбца ниже каждый получают равную долю доступной ширины и уменьшаются или увеличиваются вместе:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid: auto / 1fr 1fr 1fr;
        gap: 10px;
        background-color: #1c87c9;
        padding: 10px;
      }
      .grid-container > div {
        background-color: rgba(255, 255, 255, 0.9);
        text-align: center;
        padding: 20px;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Three equal columns with fr units</h2>
    <div class="grid-container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
    </div>
  </body>
</html>

Правило grid: auto / 1fr 1fr 1fr эквивалентно более многословной записи:

grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr;
/* all other grid sub-properties reset to initial */

Пример 5: Именованные шаблонные области

Сокращение grid поддерживает синтаксис grid-template-areas напрямую. Каждая строка в кавычках представляет одну строку сетки; каждое слово внутри — имя области. Точка (.) обозначает пустую ячейку.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .layout {
        display: grid;
        grid:
          "header header header" 60px
          "sidebar main   main"  1fr
          "footer footer footer" 40px
          / 160px 1fr 1fr;
        gap: 8px;
        height: 260px;
        background-color: #ccc;
        padding: 8px;
      }
      .header  { grid-area: header;  background: #1c87c9; color: #fff; display: flex; align-items: center; justify-content: center; }
      .sidebar { grid-area: sidebar; background: #8ecae6; display: flex; align-items: center; justify-content: center; }
      .main    { grid-area: main;    background: #eee;    display: flex; align-items: center; justify-content: center; }
      .footer  { grid-area: footer;  background: #023e8a; color: #fff; display: flex; align-items: center; justify-content: center; }
    </style>
  </head>
  <body>
    <div class="layout">
      <div class="header">Header</div>
      <div class="sidebar">Sidebar</div>
      <div class="main">Main content</div>
      <div class="footer">Footer</div>
    </div>
  </body>
</html>

Значение после каждой строки в кавычках (60px, 1fr, 40px) — высота строки сетки. Символ / в конце начинает список ширин столбцов (160px 1fr 1fr).

Когда использовать grid, а когда grid-template

ЦельИспользуйте
Задать только явные размеры строк/столбцов и именованные областиgrid-template
Также управлять направлением авторазмещения или размерами неявных трековgrid
Задать только ширины столбцовgrid-template-columns
Задать только высоты строкgrid-template-rows

Использование наиболее узкого сокращения делает код легче для чтения и не позволяет случайно сбросить несвязанные подсвойства.

Поддержка браузерами

Сокращение grid поддерживается во всех современных браузерах (Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+). В старых окружениях может потребоваться задавать подсвойства по отдельности. Актуальные данные о поддержке смотрите на Can I use: CSS Grid Layout.

Смотрите также

  • grid-template — сокращение только для шаблонных подсвойств
  • grid-template-columns и grid-template-rows — задание размеров явных треков
  • grid-template-areas — именование областей макета
  • grid-auto-flow — управление тем, как автоматически размещаемые элементы заполняют сетку
  • grid-auto-rows и grid-auto-columns — задание размеров неявных треков
  • grid-gap — отступы между строками и столбцами
  • grid-area — размещение элемента по именованной области или номерам линий
  • display — значение grid, превращающее элемент в контейнер сетки
  • align-items и justify-content — выравнивание внутри сетки

Практика

Практика
Какие из следующих утверждений о сокращённом свойстве CSS grid верны?
Какие из следующих утверждений о сокращённом свойстве CSS grid верны?
Was this page helpful?