Полное руководство по CSS Grid

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

Руководство по CSS Grid в видео формате от Александра Сокикри

Важные термины CSS Grid

Прежде чем погружаться в концепции Grid, важно понимать терминологию. Поскольку здесь участвующие термины все схожи концептуально, легко путать их друг с другом, если вы не запомните их значения, определенные спецификацией Grid. Но не волнуйтесь, их не так много.

Grid Container

Это элемент, на котором применяется display: grid. Он является прямым родителем всех элементов сетки. В этом примере .container является контейнером grid.

<div class="container">
  <div class="item item-1"> </div>
  <div class="item item-2"> </div>
  <div class="item item-3"> </div>
</div>

Grid Item

Дочерние элементы (т.е. прямые потомки) контейнера grid. Здесь элементы .item являются элементами grid, но sub-item не является таковым.

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

Grid Line

Разделяющие линии, составляющие структуру сетки. Они могут быть вертикальными («линии сетки столбцов») или горизонтальными («линии сетки строк») и располагаются с обеих сторон строки или столбца. Здесь желтая линия является примером линии сетки столбцов.

Grid Cell

Пространство между двумя смежными линиями сетки строки и двумя смежными линиями сетки столбца. Это «единица» сетки. Здесь ячейка сетки между линиями сетки строк 1 и 2 и линиями сетки столбцов 2 и 3.

Grid Track

Пространство между двумя смежными линиями сетки. Можно думать о них как о колонках или строках сетки. Вот трек сетки между второй и третьей линиями сетки строк.

Grid Area

Полное пространство, ограниченное четырьмя линиями сетки. Область сетки может состоять из любого количества ячеек сетки. Вот область сетки между линиями сетки строк 1 и 3 и линиями сетки столбцов 1 и 3.

Свойства для родительского элемента

CSS Grid свойство: display

Определяет элемент как контейнер grid и устанавливает новый контекст форматирования сетки для его содержимого.

• grid — генерирует блочную сетку
• inline-grid — генерирует встроенную сетку

.container {
  display: grid | inline-grid;
}

CSS Grid свойства: grid-template-columns и grid-template-rows

Свойства CSS Grid «grid-template-columns» и «grid-template-rows» определяют структуру сетки, задавая ее колонки и строки. Они принимают список значений, разделенных пробелом, где каждое значение представляет размер трека. Размер может быть задан в пикселях, процентах или fr-единицах (доля свободного пространства в сетке).

Пример использования «grid-template-columns«:

.container {
  display: grid;
  grid-template-columns: 100px 200px 1fr;
}

Этот код определяет сетку с тремя колонками: первая имеет ширину 100 пикселей, вторая — 200 пикселей, а третья занимает все оставшееся свободное место.

Пример использования «grid-template-rows«:

.container {
  display: grid;
  grid-template-rows: 50px 100px;
}

Этот код определяет сетку с двумя строками: первая имеет высоту 50 пикселей, а вторая — 100 пикселей.

grid-template-columns и grid-template-rows определяют столбцы и строки сетки с помощью списка значений, разделенных пробелами. Значения представляют размер дорожки, а пространство между ними представляет линию сетки.

• <track-size> — может быть длиной, процентом или долей свободного пространства в сетке с использованием единицы измерения fr
• <line-name> — произвольное имя по вашему выбору

.container {
  grid-template-columns: ...  ...;
  /* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */
}

Линии сетки автоматически получают положительные номера из заданных значений (при этом -1 является альтернативой для самой последней строки).

Однако вы можете сами называть линии. Обратите внимание на синтаксис квадратных скобок для имен линий:

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

Обратите внимание, что линия может иметь более одного имени. Например, в этом случае у второй линии будет два имени: row1-end и row2-start:

.container {
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

Если ваше значение содержит повторяющиеся части, вы можете использовать запись repeat(), чтобы упростить код:

.container {
  grid-template-columns: repeat(3, 20px [col-start]);
}

Что эквивалентно этому:

.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}

Если несколько строк имеют одно и то же имя, на них можно ссылаться по имени строки и количеству.

.item {
  grid-column-start: col-start 2;
}

Единица измерения fr позволяет задавать размер дорожки как долю свободного пространства контейнера grid. Например, этот код установит каждый элемент на треть ширины контейнера grid:

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

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

.container {
  grid-template-columns: 1fr 50px 1fr 1fr;
}

CSS Grid свойство: grid-template-areas

Свойство grid-template-areas позволяет определить шаблон сетки, используя имена областей сетки, которые определяются с помощью свойства grid-area. Повторение имени области приводит к тому, что содержимое распространяется на эти ячейки. Точка означает пустую ячейку. Синтаксис свойства предоставляет визуализацию структуры сетки.

• <grid-area-name> — имя области сетки, определенное с помощью свойства grid-area
• . — точка означает пустую ячейку сетки
• none — не определены области сетки

.container {
  grid-template-areas: 
    "<grid-area-name> | . | none | ..."
    "...";
}

Пример:

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

Этот код создаст сетку размером 4 колонки на 3 строки. Верхняя строка будет состоять из области заголовка (header). Средняя строка будет состоять из двух главных областей (main), одной пустой ячейки и одной боковой области (sidebar). Последняя строка — это только подвал (footer). Для этого будет использована функция grid-template-areas, которая определяет сетку, используя имена областей. В данном случае каждый элемент в списке представляет строку в сетке, и точки обозначают пустые ячейки, а буквы обозначают имена заданных областей.

Каждая строка в объявлении должна иметь одинаковое количество ячеек.

Вы можете использовать любое количество смежных точек, чтобы объявить одну пустую ячейку. Пока между точками нет пробелов, они представляют собой одну ячейку.

Обратите внимание, что вы не называете линии с этим синтаксисом, а только области. При использовании этого синтаксиса линии на обоих концах областей фактически автоматически получают имена. Если имя вашей области сетки — foo, имя линии начальной строки и линии начального столбца будет foo-start, а имя последней строки и последней линии столбца будет foo-end. Это означает, что некоторые линии могут иметь несколько имен, например, крайняя левая линия в приведенном выше примере будет иметь три имена: header-start, main-start и footer-start.

CSS Grid свойство: grid-template

Свойство grid-template в CSS Grid позволяет задать структуру сетки, определяя шаблоны строк, колонок и областей.

Значения:

• none — устанавливает значения свойств по умолчанию
• <grid-template-rows> / <grid-template-columns> — задает шаблоны строк и колонок, области оставляются неопределенными (равносильно заданию свойств grid-template-rows и grid-template-columns с последующим установлением grid-template-areas в none)
• <grid-template-rows> / <grid-template-columns> / <grid-template-areas> — задает шаблоны строк и колонок, а также области в сетке.

Пример использования:

.container {
  display: grid;
  grid-template:
    "header header header" 100px
    "nav content aside" 1fr
    "footer footer footer" 100px /
    1fr 3fr 1fr;
}

В этом примере мы определяем сетку с тремя строками и тремя колонками. Первая строка состоит из трех областей, которые будут занимать по 100 пикселей высоты. Вторая строка состоит из трех областей, первая и третья займут по одной доле от доступной высоты (1fr), а вторая область займет оставшуюся высоту (content). Третья строка повторяет первую.

Колонки определяются так, что первая и третья займут по одной доле от доступной ширины (1fr), а вторая будет занимать три доли от доступной ширины (3fr).

Также мы определяем имена областей с помощью значений, заключенных в кавычки, разделенных пробелами и расположенных в таком же порядке, как и области. Можно заметить, что область content не задается в grid-template-areas, но находит свое место в шаблоне колонок.

Этот пример использует сокращенную форму свойства grid-template. Если вы хотите определить шаблоны строк и колонок отдельно, а области задать отдельно, вы можете использовать свойства grid-template-rows, grid-template-columns и grid-template-areas.

CSS Grid свойства: column-gap, row-gap, gap

Свойства «column-gap» и «row-gap» в CSS Grid используются для управления промежутками между колонками и строками сетки соответственно.

Свойство «column-gap» определяет ширину промежутка между колонками, тогда как свойство «row-gap» устанавливает высоту промежутка между строками.

Оба свойства могут принимать значения в единицах измерения длины, таких как px, % или em. Кроме того, для установки значения промежутка можно использовать ключевые слова, такие как «normal«, которое определяет нормальный промежуток между колонками или строками, определенный браузером.

Использование свойств «column-gap» и «row-gap» позволяет легко управлять расстоянием между элементами внутри сетки CSS Grid:

.container {
  column-gap: 10px;
  row-gap: 15px;
}

В CSS Grid есть сокращенное свойство для «row-gap» и «column-gap«, называемое «gap«. Оно позволяет установить значения для промежутков между строками и колонками одновременно с использованием одного или нескольких значений, разделенных пробелом.

.container {
  gap: <grid-row-gap> <grid-column-gap>;

  gap: 15px 10px;
}

CSS Grid свойство: justify-items

justify-items — это свойство CSS Grid, которое определяет выравнивание элементов сетки вдоль главной оси (inline-axis). Главная ось зависит от значения «grid-template-rows«. Оно применяется ко всем элементам сетки внутри контейнера.

Значения свойства «justify-items» могут быть:

• start: элементы сетки выравниваются к началу ячеек вдоль главной оси.
• end: элементы сетки выравниваются к концу ячеек вдоль главной оси.
• center: элементы сетки выравниваются по центру ячеек вдоль главной оси.
• stretch: элементы сетки растягиваются на всю доступную ширину вдоль главной оси.

.container {
  justify-items: start | end | center | stretch;
}

Визуальные примеры для всех значений:

.container {
  justify-items: start;
}

Элементы сетки выравниваются к началу ячеек вдоль главной оси.

.container {
  justify-items: end;
}

Элементы сетки выравниваются к концу ячеек вдоль главной оси.

.container {
  justify-items: center;
}

Элементы сетки выравниваются по центру ячеек вдоль главной оси.

.container {
  justify-items: stretch;
}

Элементы сетки растягиваются на всю доступную ширину вдоль главной оси.

CSS Grid свойство: align-items

align-items — это свойство CSS Grid, которое выравнивает элементы сетки вдоль блочной оси (column-axis). Оно применяется ко всем элементам сетки внутри контейнера.

Значения свойства «align-items» могут быть:

• stretch: элементы сетки растягиваются на всю доступную высоту вдоль блочной оси (значение по умолчанию).
• start: элементы сетки выравниваются к началу ячеек вдоль блочной оси.
• end: элементы сетки выравниваются к концу ячеек вдоль блочной оси.
• center: элементы сетки выравниваются по центру ячеек вдоль блочной оси.
• baseline: элементы сетки выравниваются вдоль базовой линии текста. Можно использовать модификаторы «first baseline» и «last baseline», чтобы выровнять элементы сетки в соответствии с первой или последней базовой линией в многострочном тексте.

.container {
  align-items: start | end | center | stretch;
}

Элементы сетки выравниваются к началу ячеек вдоль блочной оси:

.container {
  align-items: start;
}

Элементы сетки выравниваются к концу ячеек вдоль блочной оси:

.container {
  align-items: end;
}

Элементы сетки выравниваются по центру ячеек вдоль блочной оси:

.container {
  align-items: center;
}

Элементы сетки растягиваются на всю доступную высоту вдоль блочной оси:

.container {
  align-items: stretch;
}

Для свойства «align-items» также существуют модификаторы ключевых слов «safe» и «unsafe» (их можно использовать как «align-items: safe end«).

Ключевое слово «safe» означает «попытаться выровнять элементы таким образом, но не настаивать на этом, если это приведет к перемещению элемента в недоступную область«, в то время как «unsafe» позволит перемещать контент в недоступные области, что может привести к потере данных («data loss»).

CSS Grid свойство: place-items

Свойство «place-items» устанавливает значения для свойств «align-items» и «justify-items» в одном объявлении.

• <align-items> / <justify-items> — Первое значение устанавливает свойство «align-items«, второе значение устанавливает свойство «justify-items«. Если второе значение опущено, то первое значение устанавливается для обоих свойств.

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

.center {
  display: grid;
  place-items: center;
}

CSS Grid свойство: justify-content

Свойство justify-content выравнивает сетку вдоль оси инлайн (ряды), то есть горизонтально в контейнере grid. Если общий размер сетки меньше размера контейнера, то это свойство позволяет выравнивать сетку внутри контейнера.

Доступные значения:

• start — выравнивание сетки по краю контейнера
• end — выравнивание сетки по противоположному краю контейнера
• center — выравнивание сетки по центру контейнера
• stretch — увеличивает размер элементов сетки так, чтобы они заполнили всю доступную ширину контейнера
• space-around — распределяет пространство равномерно между элементами сетки, с половинными промежутками на краях
• space-between — распределяет пространство равномерно между элементами сетки, без промежутков на краях
• space-evenly — распределяет пространство равномерно между элементами сетки, включая края

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;    
}

Выравнивание сетки по краю контейнера:

.container {
  justify-content: start;
}

Выравнивание сетки по противоположному краю контейнера:

.container {
  justify-content: end;    
}

Выравнивание сетки по центру контейнера:

.container {
  justify-content: center;    
}

Увеличивает размер элементов сетки так, чтобы они заполнили всю доступную ширину контейнера:

.container {
  justify-content: stretch;    
}

Распределяет пространство равномерно между элементами сетки, с половинными промежутками на краях:

.container {
  justify-content: space-around;    
}

Распределяет пространство равномерно между элементами сетки, без промежутков на краях:

.container {
  justify-content: space-between;    
}

Распределяет пространство равномерно между элементами сетки, включая края:

.container {
  justify-content: space-evenly;    
}

CSS Grid свойство: align-content

Свойство align-content выравнивает грид по вертикальной оси (столбцы) в случае, когда размер грида меньше размера его контейнера.

• start: выравнивает грид с началом контейнера
• end: выравнивает грид по концу контейнера
• center: выравнивает грид по центру контейнера
• stretch: растягивает элементы грида, чтобы грид заполнил высоту контейнера
• space-around: распределяет равное количество пространства между каждым элементом грида, с половинным размером пространства на концах
• space-between: распределяет равное количество пространства между каждым элементом грида, без пространства на концах
• space-evenly: распределяет равное количество пространства между каждым элементом грида, включая концы.

.container {
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;    
}

Примеры. Выравнивает грид с началом контейнера:

.container {
  align-content: start;    
}

Выравнивает грид по концу контейнера:

.container {
  align-content: end;    
}

Выравнивает грид по центру контейнера:

.container {
  align-content: center;    
}

Растягивает элементы грида, чтобы грид заполнил высоту контейнера:

.container {
  align-content: stretch;    
}

Распределяет равное количество пространства между каждым элементом грида, с половинным размером пространства на концах:

.container {
  align-content: space-around;    
}

Распределяет равное количество пространства между каждым элементом грида, без пространства на концах:

.container {
  align-content: space-between;    
}

Распределяет равное количество пространства между каждым элементом грида, включая концы

.container {
  align-content: space-evenly;    
}

CSS Grid свойство: place-content

Свойство place-content задает значение одновременно для свойств align-content и justify-content.

<align-content> / <justify-content> – Первое значение устанавливает align-content, второе значение — justify-content. Если второе значение не указано, то оно устанавливается равным первому значению.

CSS Grid свойства: grid-auto-columns, grid-auto-rows

Свойства grid-auto-columns и grid-auto-rows определяют размеры автоматически создаваемых сеточных треков (также называемых неявными сеточными треками) в CSS Grid Layout. Неявные треки создаются в том случае, когда число элементов сетки превышает число ячеек в явной сетке или когда элемент сетки размещается за пределами явной сетки.

Значения свойств могут быть заданы как длина, процентное значение или доля свободного пространства в сетке с использованием единицы измерения fr.

.container {
  grid-auto-columns: 100px;
  grid-auto-rows: 50px;
}

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

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

.container {
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px;
}

Это создает сетку размером 2 x 2.

Теперь представьте, что вы используете свойства grid-column и grid-row, чтобы разместить ваши элементы сетки следующим образом:

.item-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

Мы указали .item-b начало на линии столбца 5 и конец на линии столбца 6, но мы никогда не определяли линии столбца 5 или 6. Поскольку мы ссылались на несуществующие линии, создаются неявные дорожки с нулевой шириной, чтобы заполнить пробелы. Мы можем использовать свойства grid-auto-columns и grid-auto-rows для указания ширины этих неявных дорожек:

.container {
  grid-auto-columns: 60px;
}

CSS Grid свойство: grid-auto-flow

Свойство grid-auto-flow определяет, как работает алгоритм автоматического размещения элементов сетки, если на сетке присутствуют элементы, которые не были явно размещены. Это свойство позволяет контролировать порядок, в котором элементы добавляются на сетку, и направление их размещения (ряды или столбцы). Существует три возможных значения: row (заполнение строк), column (заполнение столбцов) и dense (уплотненное размещение). По умолчанию значение равно row.

.container {
  grid-auto-flow: row | column | row dense | column dense;
}

Обратите внимание, что dense только меняет визуальный порядок ваших элементов и может привести к тому, что они будут отображаться в неправильном порядке, что плохо для доступности.

Рассмотрим этот HTML-код:

<section class="container">
  <div class="item-a">item-a</div>
  <div class="item-b">item-b</div>
  <div class="item-c">item-c</div>
  <div class="item-d">item-d</div>
  <div class="item-e">item-e</div>
</section>

Мы определяем сетку с пятью столбцами и двумя строками и задаете grid-auto-flow равным row (что является также значением по умолчанию):

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: row;
}

При размещении элементов на сетке мы указываем позиции только для двух из них:

.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}
.item-e {
  grid-column: 5;
  grid-row: 1 / 3;
}

Поскольку мы установили grid-auto-flow равным row, наша сетка будет выглядеть так. Обратите внимание, как три элемента, которые мы не разместили (item-b, item-c и item-d), заполняют доступные строки:

Если мы установим grid-auto-flow равным column, item-b, item-c и item-d заполнят столбцы:

CSS Grid свойство: grid

Сокращение для установки всех следующих свойств в одном объявлении: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns и grid-auto-flow (Примечание: вы можете указать только явные или неявные свойства сетки в одном объявлении grid).

Следующие два блока кода эквивалентны:

.container {
  grid: 100px 300px / 3fr 1fr;
}

.container {
  grid-template-rows: 100px 300px;
  grid-template-columns: 3fr 1fr;
}

Так же и эти два блока эквивалентны:

.container {
  grid: auto-flow / 200px 1fr;
}

.container {
  grid-auto-flow: row;
  grid-template-columns: 200px 1fr;
}

Эти 2 блока тоже эквивалентны:

.container {
  grid: auto-flow dense 100px / 1fr 2fr;
}

.container {
  grid-auto-flow: row dense;
  grid-auto-rows: 100px;
  grid-template-columns: 1fr 2fr;
}

И эти 2 блока эквивалентны:

.container {
  grid: 100px 300px / auto-flow 200px;
}

.container {
  grid-template-rows: 100px 300px;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
}

Более сложный пример (оба блока эквивалентны):

.container {
  grid: [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
}

.container {
  grid-template-areas: 
    "header header header"
    "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;    
}

Свойства для дочерних элементов (Grid Items)

CSS Grid свойства: grid-column-start, grid-column-end, grid-row-start, grid-row-end

Свойства grid-column-start, grid-column-end, grid-row-start и grid-row-end определяют местоположение элемента сетки, указывая на конкретные линии сетки.

Свойство grid-column-start/grid-row-start указывает на линию, где элемент начинается, а свойство grid-column-end/grid-row-end указывает на линию, где элемент заканчивается.

Значения:

• <line> – может быть числом, чтобы указать на номер линии сетки, или именем, чтобы указать на именованную линию сетки.
• span <number> – элемент займет заданное количество ячеек сетки.
• span <name> – элемент займет все ячейки до следующей линии сетки с указанным именем.
• auto – указывает на автоматическое размещение элемента, автоматический спан, или стандартный спан из одной ячейки.

Если свойство grid-column-end/grid-row-end не указано, элемент по умолчанию займет одну ячейку.

Элементы могут перекрываться. Для контроля порядка наложения элементов можно использовать свойство z-index.

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}

Примеры с илюстрацией:

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start;
  grid-row-end: 3;
}

.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2;
  grid-row-end: span 2;
}

CSS Grid свойства: grid-column, grid-row

grid-column и grid-row — это сокращения для свойств grid-column-start и grid-column-end, и grid-row-start и grid-row-end, соответственно.

grid-column и grid-row позволяют установить начальную и конечную линии сетки для элемента на одной строке CSS кода.

• <start-line> / <end-line> — для каждого свойства принимает те же значения, что и grid-column-start и grid-column-end, или grid-row-start и grid-row-end, включая значение span.

.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

Пример с иллюстрацией:

.item-c {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

CSS Grid свойство: grid-area

Свойство grid-area задает имя элементу, чтобы на него можно было ссылаться в шаблоне, созданном с помощью свойства grid-template-areas. Также это свойство может использоваться как сокращенный вариант для задания значений grid-row-start + grid-column-start + grid-row-end + grid-column-end.

• <name> — имя элемента по вашему выбору;
• <row-start> / <column-start> / <row-end> / <column-end> — могут быть числами или именованными линиями.

.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

Примеры:

Для задания имени элементу:

.item-d {
  grid-area: header;
}

Как сокращенный вариант для задания значений grid-row-start + grid-column-start + grid-row-end + grid-column-end:

.item-d {
  grid-area: 1 / col4-start / last-line / 6;
}

CSS Grid свойство: justify-self

Свойство justify-self выравнивает элемент сетки внутри ячейки вдоль оси строки (в отличие от align-self, который выравнивает вдоль оси столбца). Это значение применяется к элементу сетки внутри одной ячейки.

Значения:

• start – выравнивание элемента сетки к началу ячейки
• end – выравнивание элемента сетки к концу ячейки
• center – выравнивание элемента сетки по центру ячейки
• stretch – заполняет всю ширину ячейки (это значение по умолчанию)

.item {
  justify-self: start | end | center | stretch;
}

Примеры с иллюстрациями:

.item-a {
  justify-self: start;
}

.item-a {
  justify-self: end;
}

.item-a {
  justify-self: center;
}

.item-a {
  justify-self: stretch;
}

Чтобы установить выравнивание для всех элементов в сетке, это значение также может быть установлено на контейнере с помощью свойства justify-items.

CSS Grid свойство: align-self

align-self — выравнивает элемент сетки внутри ячейки вдоль блочной (колоночной) оси.

• start — выравнивает элемент сетки по краю ячейки
• end — выравнивает элемент сетки по краю ячейки
• center — выравнивает элемент сетки в центре ячейки
• stretch — заполняет всю высоту ячейки (это значение по умолчанию)

.item {
  align-self: start | end | center | stretch;
}

Примеры с иллюстрациями:

.item-a {
  align-self: start;
}

.item-a {
  align-self: end;
}

.item-a {
  align-self: center;
}

.item-a {
  align-self: stretch;
}

Чтобы задать это свойство всем элементам, используйте свойство align-items на родительском контейнере.

CSS Grid свойство: place-self

Свойство place-self устанавливает свойства align-self и justify-self одновременно.

Значения:

• auto — «стандартное» выравнивание для режима layout.
• <align-self> / <justify-self> — первое значение устанавливает свойство align-self, второе значение — justify-self. Если второе значение опущено, то первое значение устанавливается для обоих свойств.

.item-a {
  place-self: center;
}

.item-a {
  place-self: center stretch;
}

Заключение

CSS Grid – это мощный инструмент для создания гибких макетов веб-страниц, который может заменить другие методы разметки, такие как float и flexbox (если вы не читали наше руководство по Flexbox CSS, рекомендую это сделать). Grid позволяет создавать сложные макеты с легкостью и контролировать расположение элементов на странице.

В этой статье мы рассмотрели основы CSS Grid, такие как создание сетки с помощью свойства grid-template и позиционирование элементов внутри сетки с помощью свойств grid-row, grid-column, grid-area, justify-items, align-items и других. Мы не рассмотрели некоторые функции, такие как подсетки и функцию minmax(), которые позволяют создавать более гибкие и адаптивные макеты, с ними ознакомимся в другом уроке.

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