Tidy list using Mod Queries and Range Selectors

This demo is based on my short article about CSS Mod Queries and Range Selectors
The CSS query matches a Mod and styles the remainder accordingly.

The queries will style the items near the top of the list so the last line is always tidy and you'll never get orphans at the end of the list.

Use the form below to to set the mod and add / remove list items. Check the generated CSS to see how the list works.

The queries generated are as follows

First two items: First item is always 100% wide, the second child is 50% if there are only two items
Remainder 0: As first item is 100%, the second row items have a width of 100%/mod-1
Remainder 1: No action needed, the default width for all items plus the first item
Remainder 2: Second row has two 50% width items, third row has width of 100%/mod-1
Remainder 3: Third row itmes have width 100%/mod
Remainder > 3: Second row fills up