This grid eschews Flexbox-based sizing in favor of percentage-based sizing while at the same time relying on Flexbox for alignment. It delivers the predictability of the percentage-based model with the more sophisticated alignment capasbility of the Flexbox model.

The grid construct is extended beyond its archetypal form as a Rectilinear 2D Grid and generalized as a cross-nestable pair of components, namely, Row and Column, that can be combined in an alternating pattern to build a tree of Views of any shape and depth. That is to say, a Row View (Row for short) may contain one or more Column Views (Column for short), each of which may contain one or more Rows, which in turn may contain one or more Columns, and so on. Both Rows and Columns can be styled using predictable, percentage-based width, height, padding and margins. Rows can be aligned vertically (along main axis) and horizontally (along cross axis) inside Columns, and Columns can be aligned horizontally (along main axis) and vertically (along cross axis) inside Rows. [Additionally, the multiple lines created by wrapped Row content may be aligned vertically relative to the parent Column.] And with this, we can build the entire UI component tree (or an individual component's subtree) using a consistent, repeatable and nestable pattern, one that has predictable and dynamic --not only static-- responsiveness and the ability to trigger specific adaptive behavior, both built into it.

The tree nodes are represented by Rows and their children are represented by Columns. Tree leaves are Columns that have no Row as a child.

See More (for discussion):

https://github.com/idibidiart/react-native-responsive-grid