Как выровнять в гриде по горизонтали?

Question

[vlados096zver]

display: grid;
  grid-template-columns: repeat(3, 1fr);

justify-content: center работает только для display: flex

Comments

[Ivan Ustûžanin]

в текущей постановке вопроса — никак, т.к. используется fr и колонки занимают всё место по горизонтали

[Ankhena]

justify-content: center работает только для display: flex

Это неверное утверждение.
Он работает и в гриде тоже.

Почему при этом у вас ничего не меняется, написано в комментарии выше.

[vlados096zver]

Ankhena, ок, допустим я использую

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;

как сделать выравнивание по горизонтали? Или тоже сейчас никак?

[Ankhena]

vlados096zver, вы понимаете, что если ячейки в сумме занимают всю ширину блока, то без разницы какое им ставить выравнивание? Свободного места нет, сдвигать некуда.

[vlados096zver]

Ankhena,

display: grid;
grid-template-columns: repeat(3, 446px);
justify-content: center;

так тоже не работает

[Ankhena]

vlados096zver, возьмите калькулятор, умножьте 446 на 3, прибавьте сколько там у вас gap'ов.
Выясните ширину родителя, учитывая паддинги.
Если свободное место остается, то будет работать.
Если оно отрицательно, то тоже будет - дочерние симметрично вывалятся из родителя в обе стороны.
При равной ширине ничего не будет.

Если сложно в браузере, поиграйте в коробочки в ящике. Разве что они не вывалятся, если их суммарная ширина больше ящика.
Ну не знаю чем ещё вам помочь.

Answer 1

[Николай]

justify-items - выравнивает элементы внутри их ячеек
justify-content - выравнивает всю сетку по горизонтали

Вот ссылка
https://doka.guide/css/grid-guide/

Либо вы как-то не так задали вопрос, либо покажите полный код, что вы хотите.