Split layouts display items horizontally at either end of the container by default.

Its items align centrally in the layout, with a gap between items of 3, which is a multiple of the Salt base unit. The items drive the height and width of the overall layout.

The split layout direction prop defines the main axis that items are displayed along. Set direction to column to display items in a vertical direction along a single line.

This example shows two groups of buttons inside a split layout, such as within an app header. Here, the split layout is in its default configuration.

The split layout component supports responsive props, so you can define different behaviors based on viewport size. You can use the default Salt breakpoints or pass in your own using SaltProvider.

A responsive prop is a prop that takes either multiple values (one value per breakpoint), or a single value that affects all screen sizes. For example, a layout that will responsively change direction from row to column at specific breakpoints or viewport sizes:

Control the position of the split layout and its items using the align prop.

If there is additional space available around the layout (i.e., above or below the row, or beside the column) use the align prop to position items within that space.

Use the flex item component's align prop to set an alignment for a specific item in the layout. Use the align prop to change the item’s position along the cross-axis of the layout (i.e., perpendicular to the direction–row or column).

The flex item component's grow prop enables specific items in the layout to grow and fill any remaining space that is available in the layout:

• By default, grow is set to 0 and items will display in their normal size.
• If you set an item to 1, it will fill the available space.
• If you set an item to 2, it will fill twice as much space as items that have grow set to 1.

In contrast to the grow prop, the shrink prop shrinks specific items as small as possible within the layout. By default, shrink is set to 1. If an item is set to 2, that item would attempt to take half as much space.