Школа
Веб-разработка

Расскажите о выравнивании текста в гридах

В совете о выравнивании в гридах вы выравниваете иконки. А что, если у меня вместо иконки — узкий блок текста, уже ячейки? Но я хочу его выровнять внутри сетки вправо не просто с рваным краем слева, а чтобы рваный край остался справа, но сам элемент прижался вправо.

Артём
17 ноя 2022
👁 3773  
Веб-разработка

Расскажите о выравнивании текста в гридах

В совете о выравнивании в гридах вы выравниваете иконки. А что, если у меня вместо иконки — узкий блок текста, уже ячейки? Но я хочу его выровнять внутри сетки вправо не просто с рваным краем слева, а чтобы рваный край остался справа, но сам элемент прижался вправо.

Артём
17 ноя 2022
👁 3773  
Василий Половнёв
Технический директор бюро
Полезно
 5
5
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

По умолчанию текст внутри ячейки грид‑контейнера стремится заполнить всё доступное пространство:

.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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
 5
5
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы