flexbox like this:
display: flex;
flex-flow: row wrap;
and grid like this:
display: grid;
grid-template-columns: repeat(auto-fill, 20px);
dynamically arrange items, and the counts of rows and columns are not fixed.
I'm not sure it's one problem or two, as there may be different solutions for flexbox and grid. For now I ask in a time anyway.
How can I get the count of rows and columns? And further get item by row index and column index?
See https://jsfiddle.net/w2L8oumw/16/ as an example. Drag the frame border to make the width of the result window change, such that counts of rows and columns change, too.
My idea is to iterate all items and decide their row index and column index according to their position, on initializing, item changing and resizing.
offsetTop
to determine the number of the row.