Как позиционировать элементы сетки, содержащие рубиновые элементы? ⇐ Html

[Anonymous]

I'm working with a two-columns grid where

[*]some items are "plain text" elements, say AB on the first column
some items are ruby ​​elements, say ABab on the second столбец < /li>
< /ul>
По умолчанию применяется «Нормальный», то есть выравнивание «растяжения», поэтому сетка выглядит несколько похожа на это (см. Также фрагмент кода): < /p>

Код: Выделить всё

AB ab
AB
< /code>
Но я хочу, чтобы это выглядело так: < /p>
   ab
AB AB
< /code>
Я пробовал разные решения (см. Snippet Code), но ни один из них не удовлетворяет..example-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}

.green {
background-color: green;
}

.lightblue {
background-color: lightblue;
}

.red {
background-color: red;
}

.align-self-end {
align-self: end;
}< /code>
"Default" rendering

AB
ABab

Desired rendering, obtained using 'align-self:end'

AB
ABab

But the 'align-self:end' trick does not really work

AB
ABab
bla
bla
bla

Adding an empty rt element works, but it's an ugly trick

AB

ABab
bla
bla
bla

Добавление пустого элемента к элементу сетки, который не содержит рубинового элемента, приводит к желаемому рендеринге, но я уверен, что есть менее уродливое решение.>

Подробнее здесь: https://stackoverflow.com/questions/796 ... y-elements