Добавление столбца сетки и дополнительная строка сетки при изменении порядка элементов на обратный ⇐ CSS

[Anonymous]

У меня есть HTML, который находится вне моего контроля, и я пытаюсь использовать сетку CSS, чтобы перевернуть элементы с помощью сетки CSS.
Я указываю строки-шаблона сетки: 1fr, но почему-то там 2 строки по 3 столбца вместо 1 строки с 3 столбцами.

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

.grid-container {
border: 10px solid red;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
}

.item-1 {
grid-column: 3;
border: 1px solid blue;
}

.item-2 {
grid-column: 2;
border: 1px solid cyan;
}

.item-3 {
grid-column: 1;
border: 1px solid green;
}

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

Static Template



One
Two
Three

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