justify-items

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Свойство, с помощью которого задаётся выравнивание грид-элементов по горизонтальной оси. Применяется ко всем элементам внутри грид-родителя.

Пример

Секция статьи "Пример"
        
          
          .container {  display: grid;  grid-template-columns: 1fr 200px 1fr;  grid-template-rows: repeat(3, 150px);  gap: 20px;  justify-items: start;}.item {  min-width: 150px;}
          .container {
  display: grid;
  grid-template-columns: 1fr 200px 1fr;
  grid-template-rows: repeat(3, 150px);
  gap: 20px;

  justify-items: start;
}

.item {
  min-width: 150px;
}

        
        
          
        
      
Пример реализации свойства justify-items со значением start

Как пишется

Секция статьи "Как пишется"
  • start — выравнивает элемент по начальной (левой) линии.
  • end — выравнивает элемент по конечной (правой) линии.
  • center — выравнивает элемент по центру грид-ячейки.
  • stretch — растягивает элемент на всю ширину грид-ячейки.

Подсказки

Секция статьи "Подсказки"

💡 Можно управлять выравниванием отдельных грид-элементов при помощи свойства justify-self.