Позиционировать сетку, чтобы их дети были выровнены. ⇐ 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 кода), но ни один из них не удовлетворяет.
Есть ли способ указать, что два элемента сетки должны быть расположены так, чтобы двое соответствующих детей были выровнены? Lang-CSS PrettyPrint-Override ">.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 ... re-aligned