Make nice, even rows of things.


Imagine two rows. The first row has 4 items. The second has 1 item.

This is hell.
Akwardly arranged fish

Now, imagine two rows. The first row has 3 items. The second has 2 items.

This is much better.
Nicely arranged fish

If you're going to have mulitiple rows, they may as well be balanced so the rows are as short as possible.

Give RoWriter a list of items and set the maximum items-per-row, and it will make it so you have as few rows as posible, with the fewest items per row.

RoWriter is a javascript function that makes your rows more pleasing.

Try it out:

Max Width

When is this useful?

RoWriter is a niche tool. Most of the time CSS flex or grid can take care of your row making needs right out of the box. In fact, the CSS approach is much simpler and you should probably just use it, and just deal with the occasional oddity. But if you are a person whose rows need to be just right, RoWriter can help get you out of a tight spot. RoWriter shines when you want to center a multi-row list of items, espeacially when you don’t know the exact length of the list.

It's a javascript function, so it works on the browser or in a Node environment. Practically speaking, it's probably most useful in front-ends built with a JS framework.

What exactly does it do?

RoWriter takes an array of items and a maximum row width from you and returns an array of arrays that each contain a properly lengthed row of your items. From there you can render those arrays into html using whatever tools you like.

Does it have limitations?

Oh boy, does it ever! The key limitation is that out of the box it cannot adjust the number of items per row based on things like browser width. That sort of thing depends on your implementation.

It’s just a JS function.

But that’s also the beauty part. You can build it into your own client-side code, and trigger rerenders or rerenders however you want.

What about React?

So weird that you happened to ask about React. I just so happen to have a react component on NPM that uses RoWriter. You can check it out here.

That's all. Make cool stuff!

Distributed with an MIT License
benjamin j friedrich © 2020