По умолчанию текст внутри ячейки грид‑контейнера стремится заполнить всё доступное пространство:
.grid {
/* Задаём две колонки,
поровну делящие контейнер,
и отступ между ними */
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
Если текста много, он заполнит всю ширину, не взирая на justify-items
и justify-self
:
.grid {
justify-items: start;
}
Соответственно, чтобы прижать текст вправо, оставив левую выключку, нужно ограничить размер текста в ячейке, например, с помощью max-width
и задать justify-self
или justify-items
в end
.grid > * {
max-width: 80%;
justify-self: end;
}
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.