FlexGrid utility

This is not a new Tailwind kind of library, this is at most a tiny bit of something like that. It solves a specific problem that occurs in every project more than once. So I get save much of time for less den 3kb gzipped and also save you pagespeed because of this tiny size.

With that little tooling, you only need two classes to create equally sized items grid (multiple rows), where the number of columns is based on two settings

• the maximum number of columns and
• the minimum width of an item

In (my) real world, that is what you most often need in 90% of websites. You have a Design with 5 boxes in a row, so you know you need 5 boxes on desktop but you also need some minimum width to let them look good. Shure you can do that all with flexbox an a view mediaqueries to make them 4, 3, 2 or 1 box in a row, depending on screensize. But as I wrote before, with my css you only need two classes and not a singel mediaquery!

To get more specific, it makes the following requirements possible:

• Set maximum columns
• Set minimum width of columns
• Align all items centered
• Full rows always uses all the available space of the parent
• All items are always the same width
• This works in every nested context
• The number of columns are automatically set, no mediaqueries for different screensizes needed.