The limits of CSS styling select options

Sometimes you learn the most from failures!

I wanted a <select multiple> element where the <options> were laid out in a grid. I nearly got there.

It's possible to have the <option>s in a horizontal row - but only on Chrome and Firefox.

Here's a quick fiddle showing the results:

As you can see, it's possible to do some pretty extravagant styling of the individual <options> you can even change how they look when they're selected.

But it's impossible to get them to wrap using a flexbox or grid approach. It seems the only layout options are a vertical or horizontal list.

Why, yes, I should probably have used <input type="checkbox"> instead!