Как выровнять grid контейнер по центру

Как разместить grid элементы по центру?

Нужно что бы черные квадраты стали по центру, либо что бы между ними стали одинаковые отступы, как это сделать?

Отслеживать
12.8k 4 4 золотых знака 32 32 серебряных знака 62 62 бронзовых знака
задан 27 дек 2017 в 21:37
uzi_no_uzi uzi_no_uzi
2,186 2 2 золотых знака 18 18 серебряных знаков 51 51 бронзовый знак
как и при display: flex — используем justify-content: center.
27 дек 2017 в 22:00

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

justify-content: center; Странно, правда? )

.container < display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 280px)); grid-column-gap: 18px; grid-row-gap: 20px; border: 1px solid red; justify-content: center; >.children

Отслеживать
ответ дан 28 дек 2017 в 5:40
Andrei Fedorov Andrei Fedorov
5,809 1 1 золотой знак 9 9 серебряных знаков 31 31 бронзовый знак
У меня не работало это свойство по какой-то непонятной причине
28 дек 2017 в 8:32

У меня тоже не работало, а вот это заработало

justify-items: center; 

Отслеживать
28.6k 21 21 золотой знак 59 59 серебряных знаков 141 141 бронзовый знак
ответ дан 12 мар 2020 в 14:30
Андрей Величко Андрей Величко
31 1 1 бронзовый знак

Мне нравиться больше вот так:

height: 100vh; display: grid; place-items: center; 

height: 100vh; display: grid; place-content: center; 

Можно задавать два значение, выравнивая по горизонтали или вертикали!

А для отступов подойдёт:

gap: 10px; 

Отслеживать
ответ дан 1 фев 2023 в 18:50
Nikita Shpikin Nikita Shpikin
11 3 3 бронзовых знака

• html
• css
• css-grid

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Выравнивание блоков в CSS разметке Grid

Если вы знакомы с flexbox, вы уже столкнулись с тем, как гибкие элементы могут быть правильно выровнены внутри контейнера flex. Эти свойства выравнивания, которые мы впервые встретили в спецификации flexbox, были перенесены в новую спецификацию под названием Box Alignment Level 3. Эта спецификация содержит подробную информацию о том, как выравнивание должно работать во всех различных методах компоновки.

Каждый метод макета, который реализует выравнивание ящиков, будет иметь некоторые отличия из-за того, что каждый метод имеет разные функции и ограничения (и унаследованное поведение), что делает невозможным выравнивание точно таким же образом по всем направлениям. Спецификация Box Alignment содержит подробную информацию для каждого метода, однако вы были бы разочарованы, если бы попытались выполнить выравнивание по многим методам прямо сейчас, поскольку поддержка браузера ещё не существует. Там, где у нас есть поддержка браузера для свойств выравнивания и распределения пространства из спецификации Box Alignment, в grid макета.

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

Две оси grid layout

При работе с раскладкой сетки у вас есть две оси для выравнивания объектов — оси блока или столбца, оси inline или строки. Ось блока — это ось, на которой блоки выложены в макете блока. Если у вас есть два абзаца на вашей странице, они отображаются один под другим, поэтому в этом направлении мы описываем ось блока. В спецификации CSS Grid Layout она называется осью столбца, так как это ось, по которой выполняются наши дорожки столбцов.

Внутренняя ось (inline axis) проходит по оси блока, это направление, в котором выполняется регулярный поток строк. В спецификации CSS Grid Layout его иногда называют осью строки, являющейся осью, по которой идут наши дорожки.

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

Выравнивание элементов на блоке или столбце по оси

Элементы управления align-self и align-items на оси блока. Когда мы используем эти свойства, мы меняем выравнивание элемента в области сетки, которую вы поместили.

В следующем примере у меня есть четыре области сетки внутри моей сетки. Я могу использовать свойство align-items в контейнере сетки, чтобы выровнять элементы, используя одно из следующих значений:

• auto
• normal
• start
• end
• center
• stretch
• baseline
• first baseline
• last baseline

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

.wrapper  display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; align-items: start; > .item1  grid-area: a; > .item2  grid-area: b; > .item3  grid-area: c; > .item4  grid-area: d; > 

div class="wrapper"> div class="item1">Item 1div> div class="item2">Item 2div> div class="item3">Item 3div> div class="item4">Item 4div> div> 

Имейте в виду, что после установки align-self: start высота каждого дочернего будет определяться содержимым . Это противоречит полностью отсутствию выравнивания и в этом случае высота каждого растягивается, чтобы заполнить его область сетки.

Свойство align-items устанавливает свойство align-self для всех дочерних элементов сетки. Это означает, что вы можете установить свойство индивидуально, используя align-self по элементу сетки.

В следующем примере я использую свойство align-self , чтобы продемонстрировать различные значения выравнивания. В первой области отображается поведение по умолчанию для выравнивания, которое должно растягиваться. Второй элемент имеет значение самоограничения start , третий end и четвёртый center .

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

.wrapper  display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; > .item1  grid-area: a; > .item2  grid-area: b; align-self: start; > .item3  grid-area: c; align-self: end; > .item4  grid-area: d; align-self: center; > 

div class="wrapper"> div class="item1">Item 1div> div class="item2">Item 2div> div class="item3">Item 3div> div class="item4">Item 4div> div> 

Элементы с внутренним соотношением сторон

Спецификация указывает, что поведение по умолчанию в align-self должно растягиваться, за исключением элементов, которые имеют внутреннее соотношение сторон, в этом случае они ведут себя как start . Причиной этого является то, что если элементы с соотношением сторон настроены на растяжение, это значение по умолчанию будет искажать их.

Это поведение было уточнено в спецификации, при этом браузеры ещё не реализовали правильное поведение. Пока это не произойдёт, вы можете убедиться, что элементы не растягиваются, например изображения, которые являются прямыми дочерними элементами сетки, путём установки align-self и justify-self (en-US) start . Это будет имитировать правильное поведение после его реализации.

Justifying Items on the Inline or Row Axis

Поскольку align-items и align-self обрабатывают выравнивание элементов на оси блока, justify-items и justify-self (en-US) выполнить ту же работу на оси inline или row. Значения, которые вы можете выбрать, такие же, как для align-self .

• auto
• normal
• start
• end
• center
• stretch
• baseline
• first baseline
• last baseline

Вы можете увидеть тот же пример, что и для align-items ниже. На этот раз мы применяем свойство justify-self (en-US).

Опять же, значение по умолчанию stretch , за исключением элементов с внутренним соотношением сторон. Это означает, что по умолчанию элементы сетки будут покрывать их площадь сетки, если вы не измените её, установив выравнивание. Первый элемент в примере демонстрирует это выравнивание по умолчанию:

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

.wrapper  display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; > .item1  grid-area: a; > .item2  grid-area: b; justify-self: start; > .item3  grid-area: c; justify-self: end; > .item4  grid-area: d; justify-self: center; > 

div class="wrapper"> div class="item1">Item 1div> div class="item2">Item 2div> div class="item3">Item 3div> div class="item4">Item 4div> div> 

Как и align-self и align-items , вы можете применить justify-items к контейнеру сетки, чтобы установить значение justify-self (en-US) для всех элементов.

Свойства justify-self (en-US) и justify-items не реализованы в flexbox. Это связано с одномерным характером flexbox и может быть несколько элементов вдоль оси, что делает невозможным оправдание одного элемента. Чтобы выровнять элементы вдоль основной, встроенной оси в flexbox, вы используете свойство justify-content .

Center an item in the area

Объединив свойства align и justify, мы можем легко центрировать элемент внутри области сетки.

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

.wrapper  display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; grid-auto-rows: 200px; grid-template-areas: ". a a ." ". a a ."; > .item1  grid-area: a; align-self: center; justify-self: center; > 

div class="wrapper"> div class="item1">Item 1div> div> 

Aligning the grid tracks on the block, or column, axis

Если у вас есть ситуация, когда ваши дорожки сетки используют область, которая меньше, чем контейнер сетки, вы можете выровнять трассы сетки самостоятельно внутри контейнера. И снова это работает на блочной и встроенной осях с align-content выравниванием дорожек на оси блока и justify-content , выполняющим выравнивание по встроенной оси. Значения для align-content и justify-content :

• normal
• start
• end
• center
• stretch
• space-around
• space-between
• space-evenly
• baseline
• first baseline
• last baseline

В приведённом ниже примере у меня есть контейнер сетки размером 500 пикселей на 500 пикселей. Я определил 3 строки и столбцы, каждый из 100 пикселей с 10-пиксельным жёлобом. Это означает, что внутри контейнера сетки есть пространство как в блочном, так и в линейном направлениях.

Свойство align-content применяется к контейнеру сетки, поскольку оно работает на всей сетке. Поведение по умолчанию в макете сетки start , поэтому наши дорожки сетки находятся в верхнем левом углу сетки, выровнены по отношению к стартовым линиям сетки:

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

.wrapper  display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); height: 500px; width: 500px; grid-gap: 10px; grid-template-areas: "a a b" "a a b" "c d d"; > .item1  grid-area: a; > .item2  grid-area: b; > .item3  grid-area: c; > .item4  grid-area: d; > 

div class="wrapper"> div class="item1">Item 1div> div class="item2">Item 2div> div class="item3">Item 3div> div class="item4">Item 4div> div> 

Если я добавлю align-conten в мой контейнер со значением end , все треки перейдут в конечную строку контейнера сетки в размерности блока:

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

.wrapper  display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); height: 500px; width: 500px; grid-gap: 10px; grid-template-areas: "a a b" "a a b" "c d d"; align-content: end; > .item1  grid-area: a; > .item2  grid-area: b; > .item3  grid-area: c; > .item4  grid-area: d; > 

div class="wrapper"> div class="item1">Item 1div> div class="item2">Item 2div> div class="item3">Item 3div> div class="item4">Item 4div> div> 

Мы также можем использовать значения для этого свойства, которые могут быть знакомы с flexbox; значения пространственного распределения space-between , space-around и space-evenly . Если мы обновим align-content до space-between , вы увидите как выглядят элементы на нашем пространстве grid:

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

.wrapper  display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); height: 500px; width: 500px; grid-gap: 10px; grid-template-areas: "a a b" "a a b" "c d d"; align-content: space-between; > .item1  grid-area: a; > .item2  grid-area: b; > .item3  grid-area: c; > .item4  grid-area: d; > 

div class="wrapper"> div class="item1">Item 1div> div class="item2">Item 2div> div class="item3">Item 3div> div class="item4">Item 4div> div> 

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

В приведённом ниже изображении я поместил сетку с align-content , со значением start рядом с сеткой, когда значение align-content имеет значение space-between . Вы можете видеть, как элементы 1 и 2, которые охватывают два ряда дорожек, взяты на дополнительной высоте, поскольку они получают дополнительное пространство, добавленное к промежутку между этими двумя дорожками:

Justifying the grid tracks on the row axis

На оси inline мы можем использовать justify-content для выполнения того же типа выравнивания, что мы использовали align-content для оси блока.

Используя тот же пример, я устанавливаю justify-content space-around . Это снова вызывает дорожки, которые охватывают более одного столбца, чтобы получить дополнительное пространство:

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

.wrapper  display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); height: 500px; width: 500px; grid-gap: 10px; grid-template-areas: "a a b" "a a b" "c d d"; align-content: space-between; justify-content: space-around; > .item1  grid-area: a; > .item2  grid-area: b; > .item3  grid-area: c; > .item4  grid-area: d; > 

div class="wrapper"> div class="item1">Item 1div> div class="item2">Item 2div> div class="item3">Item 3div> div class="item4">Item 4div> div> 

Alignment and auto margins

Другой способ выравнивания элементов внутри их области — использовать автоматические поля. Если вы когда-либо центрировали ваш макет в окне просмотра, установив правое и левое поле блока контейнера в auto , вы знаете, что автоматическая маржа поглощает все доступное пространство. Установив маржу в auto с обеих сторон, она выдвигает блок в середину, так как оба поля пытаются взять все пространство.

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

*  box-sizing: border-box; > .wrapper  border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; > .wrapper > div  border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; > 

.wrapper  display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); height: 500px; width: 500px; grid-gap: 10px; grid-template-areas: "a a b" "a a b" "c d d"; > .item1  grid-area: a; margin-left: auto; > .item2  grid-area: b; > .item3  grid-area: c; > .item4  grid-area: d; > 

div class="wrapper"> div class="item1">Item 1div> div class="item2">Item 2div> div class="item3">Item 3div> div class="item4">Item 4div> div> 

Вы можете видеть, как элемент выравнивается с помощью Firefox Grid Highlighter (en-US) :

Alignment and Writing Modes

Во всех этих примерах я работал на английском языке, который является языком слева направо. Это означает, что наши стартовые линии находятся сверху и слева от нашей сетки, когда мы думаем в физических направлениях.

CSS Grid Layout и спецификация Box Alignment предназначены для работы с режимами записи в CSS. Это означает, что если вы работаете с языком справа налево, например на арабском языке, начало сетки будет верхним и правым, поэтому значение по умолчанию для justify-content: start будет состоять в том, что треки сетки начинаются с правой стороны сетки.

Однако, если вы устанавливаете автоматические поля, используя margin-right или margin-left , или абсолютно позиционирующий элемент, используя top , right , bottom and left смещения, вы не будете соблюдать режимы записи. В следующем руководстве мы рассмотрим это взаимодействие между компоновкой сетки CSS, выравниванием ящиков и режимами записи. Это будет важно понимать, если вы разрабатываете сайты, которые затем отображаются на нескольких языках, или если вы хотите смешивать языки или режимы записи в дизайне.

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Какие есть способы горизонтально выровнять по центру grid элементы?

Здравствуйте.
Есть сетка из 5 grid элементов, каждый из которых занимает 1/5 ширины родителя:

 
1
 
2
 
3
 

.grid

Допустим, с бэка пришло не 5 элементов, а меньше, например 3.
Хотелось бы иметь возможность расположить эти элементы по центру родителя, либо растянуть их по ширине.
Но здесь не будут работать свойства justify-content: center и justify-content: space-between.

Есть ли какой-то способ все-таки сделать выравнивание по центру/по ширине, когда элементов меньше, чем рассчитано в grid сетке?

P.S. Знаю, что если жестко задать ширину элементов, например, grid-template-columns: repeat(5, 100px), то свойство justify-content заработает.
Но мне хотелось. чтобы работало именно с относительной величиной 1fr

• Вопрос задан более года назад
• 55 просмотров

3 комментария

Средний 3 комментария

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

CSS Grid Layout — самая мощная система компоновки из доступных на данный момент в CSS. Это двумерная система, которая может обрабатывать как колонки так и строки, в отличии от Flexbox, который в значительной степени является одномерной системой. При работе с CSS Grid, вы применяете CSS правила и родительским элементам (которые становятся Grid контейнерами) и к дочерним элементам (которые становятся Grid элементами).

CSS Grid Layout (aka «Grid») — это двумерная система компоновки основанная на сетке, цель которой заключается в том чтобы полностью изменить способ проектирования пользовательских интерфейсов основанных на сетке. CSS всегда использовался для разметки веб-страниц, но никогда не делал эту работу хорошо. Сначала мы использовали таблицы, потом обтекания (floats), позиционирование и инлайновые блоки (inline-block), но все эти методы по существу являются просто хаками и опускают много важных функциональных возможностей (например, вертикальное выравнивание). Flexbox помог, но он предназначен для более простых одномерных макетов, а не для сложных двумерных (на самом деле Flexbox и Grid очень хорошо работают вместе). CSS Grid’ы — это первый модуль созданный специально для решения проблем компоновки, которые до сих пор мы решали с помощью хаков при создании сайтов.

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

Контейнер сетки

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

Элемент сетки

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

Линия сетки

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

Трек сетки

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

Ячейка сетки

Пространство между линиями двух соседних строк и двух соседних столбцов. Это отдельная «единица измерения» сетки.

Область сетки

Общее пространство окружённое четырьмя линиями. Область может состоять из любого количества ячеек.

Свойства для контейнера:

• display
• grid-template-columns
• grid-template-rows
• grid-template-areas
• grid-template
• grid-column-gap
• grid-row-gap
• grid-gap
• justify-items
• align-items
• justify-content
• align-content
• grid-auto-columns
• grid-auto-rows
• grid-auto-flow
• grid

Свойства для элементов:

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end
• grid-column
• grid-row
• grid-area
• justify-self
• align-self

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

— display

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

• grid — формирует сетку как блок;
• inline-grid — формирует сетку как инлайновый блок;
• subgrid — если ваш контейнер это ещё и элемент (вложенная сетка), то вы можете использовать это свойство для обозначения того, чтобы размеры строк/колонок были взяты из родительского элемента, а не определяли собственный;

.container

— grid-template-columns / grid-template-rows

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

• — может быть фиксированным размером, процентами или частью свободного пространства в сетке (определяется с помощью единицы fr (fraction));
• — произвольное имя на ваш выбор;

.container < grid-template-columns: . |  . ; grid-template-rows: . |  . ; >

— grid-template-areas

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

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

.container < grid-template-areas: "| . | none | . " ". "; >

— grid-template

Сокращение для grid-template-rows, grid-template-columns, и grid-template-areas.

• none — устанавливает все три свойства в их начальное значение;
• subgrid — устанавливает grid-template-rows и grid-template-columns в subgrid, и grid-template-areas в его начальное значение;
• / — устанавливает grid-template-columns и grid-template-rows в определённое значение, соответственно, и устанавливает grid-template-areas в none;

.container < grid-template: none | subgrid | / ; >

— grid-column-gap / grid-row-gap

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

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

— grid-gap

Сокращение для grid-row-gap и grid-column-gap.

.container < grid-gap: ; >

— justify-items

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

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

.container

— align-items

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

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

.container

— justify-content

Иногда общий размер сетки может быть меньше размера контейнера. Такое может случится если у всех элементов сетки заданы фиксированные единицы измерения, например px. В таком случае можно установить выравнивание сетки внутри контейнера. Это свойство выравнивает сетку вдоль оси строки (в отличии от свойства align-content, которое выравнивает сетку вдоль оси столбца).

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

.container

— align-content

Иногда общий размер сетки может быть меньше размера контейнера. Такое может случится если у всех элементов сетки зада фиксированные единицы измерения, например px. В таком случае можно установить выравнивание сетки внутри контейнера. Это свойство выравнивает сетку вдоль оси колонки (в отличии от свойства justify-content, которое выравнивает сетку вдоль оси строки).

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

.container

— grid-auto-columns / grid-auto-rows

Определяет размер любых автоматически созданных треков (иначе говоря, неявных треков). Неявные треки создаются при явном позиционировании столбцов и строк (через grid-template-rows / grid-template-columns), которые находятся за пределами заданной сетки.

• — может быть фиксированным размером, процентами, или частью свободного пространства в сетке (с использованием единицы fr);

.container < grid-auto-columns: . ; grid-auto-rows: . ; >

— grid-auto-flow

Если у вас есть элементы, которые вы явно не позиционируете в сетке, запускается алгоритм авто-размещения, чтобы их автоматически разместить. Это свойство контролирует то, как алгоритм авто-размещения работает.

• row — говорит алгоритму авто-размещения заполнять каждую строку поочерёдно, добавляя новые строки при необходимости;
• column — говорит алгоритму авто-размещения заполнять каждую колонку поочерёдно, добавляя новые колонки при необходимости;
• dense — говорит алгоритму авто-размещения попытаться заполнить дыры в сетке, если более мелкие элементы появляются позже;

.container

— grid

Сокращение для настройки всех следующих свойств: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, и grid-auto-flow. Он также настраивает grid-column-gap и grid-row-gap на их начальные значения, даже если они не могут быть явно заданы этим свойством.

.container < grid: none | / | [ [/ ]]; >

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

— grid-column-start / grid-column-end / grid-row-start / grid-row-end

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

• — может быть числом ссылающимся на пронумерованную линию, или названием ссылающимся на именованую линию;
• span — элемент, который будет охватывать предоставленное количество треков;
• span — элемент будет будет охватывать пока не достигнет линии с указанным названием;
• auto — указывает автоматическое размещения, автоматическое охват, или охват по умолчанию;

.item < grid-column-start: | | span | span | auto grid-column-end: | | span | span | auto grid-row-start: | | span | span | auto grid-row-end: | | span | span | auto >

— grid-column / grid-row

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

• / — каждый из них принимает тоже самое, что и в длинной версии, включая охват;

.item < grid-column: / | / span ; grid-row: / | / span ; >

— grid-area

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

• — название, которое вы выберите;
• / / / — может быть нумерацией или названиями линий;

.item < grid-area: | / / / ; >

— justify-self

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

• start — выравнивает содержимое по левой части области;
• end — выравнивает содержимое по правой части области;
• center -выравнивает содержимое по центру области;
• stretch — заполняет всю ширину области (по умолчанию);

.item

— align-self

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

• start — выравнивает содержимое по верхней части области;
• end — выравнивает содержимое по нижней части области;
• center -выравнивает содержимое по центру области;
• stretch — заполняет всю высоту области (по умолчанию);