I would like to layout unicode glyphs similar to this:
There could be anywhere from 13 to say 100 items in the displayed collection (alphabets, abjads, abugidas, syllabaries, etc..), so could have a set with 99 items, or one with 16 items, etc..
How can you most beautiful (and automatically) layout the elements (so that it is also nice when responsive)? Here is what I have by default with flexbox:
Each item has a fixed height, and the width is responsive (but the same for each element).
The goal is to have every row have either an even number, or an odd number, of items. This way all vertical columns will line up (and it won’t do what my animated gif is doing, where even/odd rows are intermingled).
- Is it possible to do some math formula to calculate something like "you need to 5 items per row, except the last row will have 3 (or 1)"? Given some total count like 99?
How would you maybe do that?
I have a React component which does the Flexbox layout like <Grid minWidth={96} gap={8} maxColumns={5} breakpoints={[5, 3, 1]} />
, where breakpoints
are the number of items allowed per row, and maxColumns
is the max columns (breakpoints/maxColumn is kinda redundant, you can define either or, maybe I’ll clean that up later). All this info might be irrelevant, but just pointing out just in case, it’s my responsive grid component.
How can I somehow divide my total by x to figure out if it should be even or odd rows, and then set the maxColumns
or breakpoints
to whatever will be "most compact"? So for example:
- If it’s 26 elements, it would look best as 6 rows of 4, followed by 1 row of 2. – If it’s 27 elements,
The "beauty" of it might be subjective, and there’s not a clear rule for what is most beautiful. Just looking for anything that doesn’t easliy leave an orphaned single node at the end and then have 7 items on all other rows. Ideally we have:
- Between 3 and 7 columns.
- Last row must have the same number of items in all previous rows, or no less than
maxRowCount - 2
(so if all rows have 7, the last row can have 5 or 7 only, or if all rows have 5, then the last row can have 3 or 5 only, etc.). - Row item has a
minWidth: 96px
, and grows to fill the space. I can figure out how to make things responsive once we get the basics of this working, but assume acontainerWidth
exists.
So in my head, say we have containerWidth === 700px
. Then, 700/96 == 7+
, so perhaps 7 per row. If we have 99 items (for example), then 99 % 7 == 1
, so 7
won’t work because we’ll have 1 in the last row. 6
won’t work because 99
is even, so try 5
? 99 % 5 == 4
, that won’t work because 4
is even. So try 3
, 99 % 3 == 0
, so that would work as is, use that!
How would you implement something like that?
2
Answers
Something like this seems correct, but did I solve it properly?
Here is an example that repeatedly tests if the number of columns matches your criteria