Skip to main content
Latitude for React provides a set of layout components to help you build your app. These components are designed to be used in combination with each other to create complex layouts. They are also designed to be responsive and work well on all devices.

​
Flexbox model

The flexbox model is a one-dimensional layout model that allows you to align items in a container. It is a powerful layout tool that allows you to create complex layouts with ease. We’ve prepared a set of components that make it easy to use the flexbox model in your app:

​
Row

The Row component is a container that lays out its children in a row. It is a flex container with a flexDirection of row by default. 
<Row>
  {/* Your content here */}
</Row>

​
Column

The Column component is a container that lays out its children in a column. It is a flex container with a flexDirection of column by default. 
<Column>
  {/* Your content here */}
</Column>

​
Combining components

You can combine the Row and Column components within a View to create complex layouts. For example, you can use two Column components inside a Row component to create a sidebar and main content area. 
<div>
  <Row>
    <Column>
      {/* Sidebar content */}
    </Column>
    <Column>
      {/* Main content */}
    </Column>
  </Row>
</div>