Выровнять элементы сетки по правому краю ⇐ CSS

[Anonymous]

У меня есть этот фрагмент:

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

.grid {
border: 1px solid #c5c5c5;
width: 220px;
display: grid;
grid-template-columns: 60px 60px;
grid-auto-rows: 40px;
row-gap: 10px;
column-gap: 10px;

justify-content: end;
}

.grid > div {
background-color: rgb(0 0 255 / 0.2);
border: 3px solid blue;
text-align: center;
}

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

One
Two
Three

...но я бы хотел, чтобы это выглядело так:


Я думал, что justify-content: end мог бы сделать это, и я думаю, что так и было бы, если бы у меня был только один дочерний элемент сетки. В моем примере я хотел бы, чтобы тройка появилась там, где появился бы четвертый элемент сетки, если бы он существовал.
Я думал, что экспериментальный макет каменной кладки может делать то, что я хочу, но я не совсем понимаю, насколько он соответствует потребностям.
Я рассматривал возможность использования flex, но мне нужно ровно два элемента в каждой строке, поэтому я думаю, что сетка здесь подходит лучше.

Подробнее здесь: https://stackoverflow.com/questions/797 ... grid-items