Switch from horizontal to vertical sort order

The new API docs has nice block with properties, methods, etc.

But the sorting order is from left to right, and with large gaps between items it is hard to read. So the alternative is to use vertical sorting, but it requires a bit of trickery in CSS, specifically to know exact height of an element in order to guarantee number of columns.

Horizontal sorting:

Vertical sorting:

To implement vertical sorting, element should have the right height based on number of elements (in this example 32 elements, 3 columns, 28px height of an element) and generic CSS. Height formula: height = ceil(count / 3) * 28px (308px).

<div class='list' style='height:308px'>
    ...
</div>

.list {
    display: grid;
    column-gap: 1rem;
    grid-auto-flow: column;
    grid-template-rows: repeat(auto-fill, [col-start] 28px [col-end]);
}

playcanvas / api-reference

Switch from horizontal to vertical sort order #8