Overview

Salt layouts are a special category of components designed to manage the overall structure and arrangement of user interface elements, rather than providing visual UI elements themselves. Layouts are responsible for organizing how other components are positioned and flow within an application or page.

Salt does not provide a Figma equivalent for these layouts. Instead, Figma offers auto layout functionality, which serves a similar purpose in design tools by controlling the arrangement and responsiveness of elements.

Salt layout components are each tailored to specific structural needs:

Border layout
BorderLayout manages the top-level arrangement of your application, website or widget by positioning elements such as a footer, header and side navigation around the main content area.
Flex layout
FlexLayout enables complex arrangement of UI elements within a container and facilitates responsive design by controlling the alignment, direction and size of items.
Flow layout
FlowLayout is a simple mechanism that arranges UI elements in a horizontal order and responsively wraps them onto subsequent rows.
Grid layout
GridLayout enables complex arrangement of UI elements within a system of columns and rows to create an evenly distributed, responsive and organized user interface.
Parent-child layout
Parent-childLayout provides a parent content area alongside a dependent child content area and responsively stacks them at a given breakpoint.
Split layout
SplitLayout is a simple mechanism which arranges UI elements at opposite ends of a container.
Stack layout
StackLayout is a simple mechanism to arrange UI elements in a line, either horizontally or vertically.