The problem
- When it comes to building scalable UIs, having a grid system is a critical requirement.
- The most common choice of grid for web design is 8px 12 column grid, which is used by a lot of design libraries like bootstrap, tailwind and ant design.
- All of these libraries work quite well with web, but not at all or at least not to the same level with react-native.
- If you have a web app and a native app, it would be ideal to unify the design language across both platforms. This means it would be ideal to unify grid system you use across both.
- Hence, react-native-flex-grid
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:
- We need to build a grid system, similar to bootstrap’s, using react-native and flex.
- We need support for grid breakpoints to render a different layout based on the screen size. For example: we might want a row to have 4 items inline on iPad but one item per row stacked in a vertical fashion for iPhone.
- We need the grid to be 100% configurable, this way it’s reusable in any project regardless of the design.
- We need media queries on react-native just like we have on web.
- We need support for both react-native and react-native-web.
- We need to write code that is consistent with react for web as well.
- We need a way to visualize and test the components, ie: Storybook.
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.