The problem

React-native-flex-grid is built on top of react-native’s flex design system. It provides a {n}px {n} column grid (defaults: 8px, 12 columns).

Strategizing a solution

The strategy to build the grid system was as follows:

Grid architecture

• When it comes to design, the gold standard is to follow a 8px grid. • On web, the gold standard is to follow a 12 column grid (eg: bootstrap, react-flex-grid, tailwind). • On native, however, there’s no community consensus on a gold standard for the column count. Some libraries use 4 columns, some use 8 or 12. Apple design guideline recommends any column count between 1 & 9 (Docs).

• The decision was to go with an 8px 12 column grid.