flexgrid | generation CSS grid framework based on flexbox | Grid library

From MDN Web Docs: "window.getComputedStyle() method returns an object containing the values of all CSS properties of an element, after applying active stylesheets and resolving any basic computation those values may contain."

Window.getComputedStyle() returns a CSSStyleDeclaration object which contains key-value pairs containing names of all the CSS properties. To get the resolved value of a particular CSS property, getPropertyValue("property-name") can be used. But, window.getComputedStyle(document.querySelector(".box1")).getPropertyValue("order") is returning the order of element w/ class .box1 in the flexbox as "0". Infact, it's returning the order of every element inside flexbox as "0".

Link to JS Fiddle: https://jsfiddle.net/asxyzp/h6b3j5dL/

Additional context: I was trying to add tooltip to my project (https://flexgrid.asxyzp.repl.co/ref?platform=so), using tippy.js which creates a tooltip for every flexbox element using tippy('.box1',{content:``CLASS: .box1, ORDER : ${window.getComputedStyle(document.querySelector(".box1")).getPropertyValue("order")}``}); so that it would display the order of the flexbox element dynamically, even when changes are made, but it didn't work, so I tried to do it in fiddle, but even there I was getting the order for elements as 0.

Displaying an image gallery of different sized images and ratio with the following specs:

1. No blanks (margins) between images.
2. Respecting the original ratio as much as possible.
3. Images surrounded by a link.
4. Non-JS solution.
5. Images could be cropped a bit.
6. Portable solution.
7. Set of images displayed is random.
8. Images must be displayed from left to right (prevents using columns).

I achieved that with the following flexbox solution:

I have a Flexgrid (vb6 not .Net) disconnected from any Db, having some rows like this: