Skip to main content
Latitude provides a set of layout components to help you build your views. 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.

​
View

The View component is the root container that allows you to define layout properties for your views. 
<View>
    {/* Your content here */}
</View>

​
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 views:

​
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>
You can set the following properties on the Row component:
​
gap
number
The gap between the children of the row. Gaps are multiplied by 4 to get the actual gap in pixels. Accepts values: 4, 8, 12, 16, 20, 24, 28, 32.

​
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>
You can set the following properties on the Row component:
​
gap
number
The gap between the children of the row. Gaps are multiplied by 4 to get the actual gap in pixels. Accepts values: 4, 8, 12, 16, 20, 24, 28, 32.

​
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. 
<View theme='latitude'>
    <Row gap={8}>
        <Column>
            {/* Sidebar content */}
        </Column>
        <Column>
            {/* Main content */}
        </Column>
    </Row>
</View>