This is an announcement post for a new npm module, hexagonal-masonry-placement, released and maintained by me, Ingo Steinke, creative web developer based in Berlin, Germany.
A hex layout looks something like this.
Maybe it looks familiar from board games or online worlds, as the honeycomb tiling seemt to be the most efficient way to place items apart from the usual square layouts that most web forms and elements default to.
The above screenshot comes from my side project web app at https://dev-ux-lesezeichen.de/
While the CSS community has working drafts and experimental implementations for so-called masonry layouts, that place rectangular items in a shifted pattern like a brick wall, we can use a simple flex layout to fake more complex structures like in the screenshot above.
CSS flex and grid layouts can place items automatically in a responsive way, trying to fill the available screen space without cutting or hiding anything. That's super useful, and the result looks like a table with rows, only that there is no official built-in way to determine or act on which row an item is placed in. There are no :first-row or nth-row(2) pseudo-selectors in CSS.
I have wrapped my head around mathematical calculations to determine an items' row and set a custom CSS class name accordingly, until I found a much simpler solution that just compares each item's vertical top position with that of its predecessor and increment the row count when they differ.
I decided to publish the code as an npm module so I can refine the code and concept in one central place to avoid further confusion and possible inconsistent states of duplicated code across projects, if I ever use it anywhere else.The utility requires HTML markup and CSS styles similar to the example code provided. You can use the provided base styles in index.css or provide your own.
https://www.npmjs.com/package/hexagonal-masonry-placement