Border layout

You can set BorderLayout to display five regions: North, East, South, West and Center. You must display at least one region alongside the Center region in the layout.

By default, there are no gaps between regions.

You can manually define the size of regions. This example shows how to set the West and East regions to a fixed width, with a responsive Center region.

This layout would work well where a fixed-width side navigation is necessary, alongside responsive page content.

You can add a gap between each region. The gap prop is a multiplier that aligns to the Salt spacing system.

• The standard gap between column and row elements in Salt is 3 times the base unit.
• Use columnGap and rowGap properties to set a specific gap in a particular dimension or gap to update both values simultaneously.

BorderLayout can display any combination of border items. This example demonstrates a layout with North, West and Center regions.

Set the position property of the border item wrapper to define where content should be displayed in the layout: North, East, South, West or Center.

Use the verticalAlignment and horizontalAlignment properties of the border item wrapper to determine how content should align in the region.

Use the sticky prop of the border item wrapper to define a region as sticky. When you set it to true, content in surrounding regions will scroll beneath a sticky Border Item.

This is particularly useful if you require a region to remain visible at all times. For more information, see CSS position: sticky.

The spacing properties padding and margin are set to 0 by default and can be used to control the layout's inner and outer spacing as multiples of the Salt base unit.

You can set BorderLayout to display five regions: North, East, South, West and Center. You must display at least one region alongside the Center region in the layout.

By default, there are no gaps between regions.

You can manually define the size of regions. This example shows how to set the West and East regions to a fixed width, with a responsive Center region.

This layout would work well where a fixed-width side navigation is necessary, alongside responsive page content.

You can add a gap between each region. The gap prop is a multiplier that aligns to the Salt spacing system.

• The standard gap between column and row elements in Salt is 3 times the base unit.
• Use columnGap and rowGap properties to set a specific gap in a particular dimension or gap to update both values simultaneously.

BorderLayout can display any combination of border items. This example demonstrates a layout with North, West and Center regions.

Set the position property of the border item wrapper to define where content should be displayed in the layout: North, East, South, West or Center.

Use the verticalAlignment and horizontalAlignment properties of the border item wrapper to determine how content should align in the region.

Use the sticky prop of the border item wrapper to define a region as sticky. When you set it to true, content in surrounding regions will scroll beneath a sticky Border Item.

This is particularly useful if you require a region to remain visible at all times. For more information, see CSS position: sticky.

The spacing properties padding and margin are set to 0 by default and can be used to control the layout's inner and outer spacing as multiples of the Salt base unit.

You can set BorderLayout to display five regions: North, East, South, West and Center. You must display at least one region alongside the Center region in the layout.

By default, there are no gaps between regions.

You can manually define the size of regions. This example shows how to set the West and East regions to a fixed width, with a responsive Center region.

This layout would work well where a fixed-width side navigation is necessary, alongside responsive page content.

You can add a gap between each region. The gap prop is a multiplier that aligns to the Salt spacing system.

• The standard gap between column and row elements in Salt is 3 times the base unit.
• Use columnGap and rowGap properties to set a specific gap in a particular dimension or gap to update both values simultaneously.

BorderLayout can display any combination of border items. This example demonstrates a layout with North, West and Center regions.

Set the position property of the border item wrapper to define where content should be displayed in the layout: North, East, South, West or Center.

Use the verticalAlignment and horizontalAlignment properties of the border item wrapper to determine how content should align in the region.

Use the sticky prop of the border item wrapper to define a region as sticky. When you set it to true, content in surrounding regions will scroll beneath a sticky Border Item.

This is particularly useful if you require a region to remain visible at all times. For more information, see CSS position: sticky.

The spacing properties padding and margin are set to 0 by default and can be used to control the layout's inner and outer spacing as multiples of the Salt base unit.