Как отменить порядок строк CSS сетки? ⇐ Html

[Anonymous]

Я работаю над пользовательским интерфейсом, который имеет много блочных элементов разной ширины. Я хочу меньше блоков к верхней и большей блоках ближе к дне. Где это возможно, я хотел бы избежать пробелов между блоками. Тем не менее, в приведенном ниже репрезентативном примере показан один сценарий, который я обнаружил, где может возникнуть разрыв. Таким образом, в вашем ответе, пожалуйста, сохраните стили сетки и сохраните внутреннюю дивизион s сортированной по увеличению или уменьшению ширины.

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

.grid {
background-color: grey;
min-height: 100px;
margin-bottom: 10px;
padding: 10px;

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: dense;
}< /code>
Example #1 - Given HTML (notice gap between pink/red)

Pink
Blue
Green
Red


[b]Example #2 - Desired Look[/b]


Pink
Blue
Green
Red


Example #3 - Upside down is almost there...

Red
Green
Blue
Pink

Я понимаю, что разрыв появляется из -за того, что режим Dense работает так же, как указано - заполнения в более ранних строках (пример № 1). Тем не менее, я хотел бы найти способ удалить разрыв между розовыми и красными DIV, не прибегая к ручным размещениям строк (пример № 2). < /P>
Одна идея, которую я имел, заключалась в том, чтобы перечислить Divs в порядке наибольшей ширины до самой маленькой ширины - таким образом, сетка, естественным образом упаковывает их без пробелов. Но это расположение отображает с ног на голову о том, что я хочу (пример № 3).
Таким образом, мой вопрос ... можно ли отменить порядок неявных рядов, созданных CSS Grid?

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