ключевые отличия между justify-content, justify-items и justify-self в сетке CSS:

• на justify-content свойство управляет выравниванием столбцов сетки. Он установлен на решетки контейнер. Он не применяется и не управляет выравниванием элементов сетки.
• на justify-items свойство управляет выравниванием элементов сетки. Он установлен на решетки контейнер.
• на justify-self свойство переопределяет justify-items on отдельные предметы. Он установлен на элементы сетки и наследует значение justify-items по умолчанию.

пример

вот сетка 2x3.

• 2 столбца, каждый шириной 100 пикселей
• 3 ряда, каждый 50px высокий

емкость:

• широкий 500px в
• шириной 250 пикселей и следующий высокий

.container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px 50px 50px;
    width: 500px;
    height: 250px;
    grid-template-areas: " one two"
                         " three four"
                         " five six ";
}

.box:nth-child(1) {  grid-area: one;   }
.box:nth-child(2) {  grid-area: two;   }
.box:nth-child(3) {  grid-area: three; }
.box:nth-child(4) {  grid-area: four;  }
.box:nth-child(5) {  grid-area: five;  }
.box:nth-child(6) {  grid-area: six;   }

/* non-essential decorative styles */
body {
    display: flex;
    justify-content: center;
}
.container {
    background-color: #ddd;
    border: 1px solid #aaa;
}
.box {
    background-color: lightgreen;
    border: 1px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}

<div class="container">
    <div class="box"><span>1</span></div>
    <div class="box"><span>2</span></div>
    <div class="box"><span>3</span></div>
    <div class="box"><span>4</span></div>
    <div class="box"><span>5</span></div>
    <div class="box"><span>6</span></div>    
</div>

justify-content

на justify-content свойства выравнивает колонки внутри контейнера.

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

.container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px 50px 50px;
    width: 500px;
    height: 250px;
    grid-template-areas: " one two"
                         " three four"
                         " five six ";
}

.box:nth-child(1) {  grid-area: one;   }
.box:nth-child(2) {  grid-area: two;   }
.box:nth-child(3) {  grid-area: three; }
.box:nth-child(4) {  grid-area: four;  }
.box:nth-child(5) {  grid-area: five;  }
.box:nth-child(6) {  grid-area: six;   }

/* non-essential decorative styles */
body {
    display: flex;
    justify-content: center;
}
.container {
    background-color: #ddd;
    border: 1px solid #aaa;
}
.box {
    background-color: lightgreen;
    border: 1px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}

<div class="container">
    <div class="box"><span>1</span></div>
    <div class="box"><span>2</span></div>
    <div class="box"><span>3</span></div>
    <div class="box"><span>4</span></div>
    <div class="box"><span>5</span></div>
    <div class="box"><span>6</span></div>    
</div>

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

обратите внимание, что это свойство работает только при наличии свободного места в контейнере. Если бы любой из столбцов был размером с fr, тогда все свободное пространство будет потреблено, и justify-content будет иметь никакого эффекта.

justify-items

на justify-items свойства выравнивает элементы сетки в пределах их треков (не весь контейнер)

.container {
  justify-items: center;
}

.container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px 50px 50px;
    width: 500px;
    height: 250px;
    grid-template-areas: " one two"
                         " three four"
                         " five six ";
}

.box:nth-child(1) {  grid-area: one;   }
.box:nth-child(2) {  grid-area: two;   }
.box:nth-child(3) {  grid-area: three; }
.box:nth-child(4) {  grid-area: four;  }
.box:nth-child(5) {  grid-area: five;  }
.box:nth-child(6) {  grid-area: six;   }

/* non-essential decorative styles */
body {
    display: flex;
    justify-content: center;
}
.container {
    background-color: #ddd;
    border: 1px solid #aaa;
}
.box {
    background-color: lightgreen;
    border: 1px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}

<div class="container">
    <div class="box"><span>1</span></div>
    <div class="box"><span>2</span></div>
    <div class="box"><span>3</span></div>
    <div class="box"><span>4</span></div>
    <div class="box"><span>5</span></div>
    <div class="box"><span>6</span></div>    
</div>

с justify-items: center элементы сетки центрируются в пределах своих столбцов.

justify-self

на justify-self свойство переопределяет justify-items по отдельным пунктам.

.container        { justify-items: center;}
.box:nth-child(2) { justify-self: start; }
.box:nth-child(3) { justify-self: end; }
.box:nth-child(6) { justify-self: stretch; }


.container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px 50px 50px;
    width: 500px;
    height: 250px;
    grid-template-areas: " one two"
                         " three four"
                         " five six ";
}

.box:nth-child(1) {  grid-area: one;   }
.box:nth-child(2) {  grid-area: two;   }
.box:nth-child(3) {  grid-area: three; }
.box:nth-child(4) {  grid-area: four;  }
.box:nth-child(5) {  grid-area: five;  }
.box:nth-child(6) {  grid-area: six;   }

/* non-essential decorative styles */
body {
    display: flex;
    justify-content: center;
}
.container {
    background-color: #ddd;
    border: 1px solid #aaa;
}
.box {
    background-color: lightgreen;
    border: 1px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
}

<div class="container">
    <div class="box"><span>1</span></div>
    <div class="box"><span>2</span></div>
    <div class="box"><span>3</span></div>
    <div class="box"><span>4</span></div>
    <div class="box"><span>5</span></div>
    <div class="box"><span>6</span></div>    
</div>

align-content, align-items и align-self

эти свойства делают то же самое, что и их justify-* коллеги, но в перпендикулярном направлении.

подробнее здесь: в чем разница между align-items и align-content в макете сетки?

Спец Ссылка

10.3. Выравнивание по оси строк:justify-self и justify-items свойства

элементы сетки может быть выравнивание в встроенном измерении с помощью justify-self свойство элемента сетки или justify-items собственность на сетке контейнера.

10.4. Выравнивание оси столбца:align-self и align-items свойства

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

10.5. Выравнивание сетки:justify-content и align-content свойства

если сетка внешние края не соответствуют контейнеру сетки края содержимого (например, если столбцы не имеют размера flex), сетка дорожки выровнены в поле содержимого в соответствии с justify-content и align-content свойства в сетке контейнер.

^{(курсив добавлено)}

модуль выравнивания CSS Box

вы писали:

- это justify-items свойство в Flex-box такое же, как justify-items собственность в сетке?

хотя спецификации гибкого трубопровода и решетки обеспечивают их собственные определения для свойств выравнивания ключевого слова, как justify-items и align-content, W3C находится в процессе поэтапного отказа от свойств выравнивания для отдельных моделей коробки и реализация их новых Окно "Выравнивание" Модуль, который стремится определить набор свойств выравнивания для использования во всех моделях коробки.

из спецификации flexbox:

1.2. Модуль взаимодействия

модуль выравнивания CSS Box расширяет и заменяет определения свойства выравнивания (justify-content, align-items, align-self, align-content) введена здесь.

в спецификации сетки есть аналогичные ссылки.

хорошо, я думаю, что понял это благодаря Michael_B. Моя путаница возникла из - за того, что иногда разные свойства случайным образом ничего не меняли в макете сетки.

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

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

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

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

Как и следовало ожидать, все это также относится к свойствам align -*.

пожалуйста, поправьте меня, если я что-то не так

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

пока align-self для согласования позиции контента в ячейке вертикально.

вот результат для выравнивания элементов с помощью justify-self: start;

РЕЗУЛЬТАТ ДЛЯ КОДА justify-self: start;