Fluid Grid Systems

In this lesson, you will learn how to create dynamic column-based layouts that automatically adapt their structure when your app is viewed on different screen sizes.

The Logic of Fluidity

A "Fluid Grid" isn’t about setting fixed pixel widths; it’s about defining how many items should live side-by-side based on the available space. In React Native, we achieve this by combining flexWrap: 'wrap' with relative percentage widths.

When you want a grid that gracefully reflows—for example, showing two columns on a phone but four columns on a tablet—you define your child components with a width percentage that dictates their "footprint."

Implementing a Responsive Grid

To build a basic fluid system, wrap your items in a parent container with flexDirection: 'row' and flexWrap: 'wrap'. Then, set the width of your child items as a fraction of the screen.

const GridItem = () => (
  <View style={{ width: '50%', padding: 5 }}>
    <View style={{ height: 100, backgroundColor: 'skyblue' }} />
  </View>
);

const FluidGrid = () => (
  <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
    <GridItem />
    <GridItem />
    <GridItem />
    <GridItem />
  </View>
);

In the example above, each item is set to 50%. Because the parent has flexWrap: 'wrap', React Native calculates the available space. If you have four items and each takes up 50%, the layout engine automatically pushes the third and fourth items to a new row, creating a perfect 2x2 grid.

Why Percentages Matter

If you wanted a 3-column layout, you would simply change the width to 33.33%. Because these values are percentages, the grid remains "fluid"—it doesn't care if the device is 300dp wide or 800dp wide; the items will always maintain their proportional relationship to the container. By nesting this inside a View that respects SafeArea or follows orientation changes (which you learned previously), your grid will maintain its structural integrity regardless of the user's hardware.

Key Takeaway: Fluid grid systems rely on flexWrap: 'wrap' paired with percentage-based widths to allow components to naturally reorganize into new rows when the container's horizontal threshold is exceeded.