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 autolayout 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
Border Layout manages the top-level layout of your application, website or widget, to position elements, such as a footer, header or side navigation, around the main content area.Flex layout
Flex Layout enables complex arrangement of UI elements within a container, enabling responsive design by controlling the alignment, direction and size of items, for example, use it to arrange a items in a row, evenly spaced and centered vertically.Flow layout
Flow Layout is a simple mechanism which arranges UI elements in a horizontal order and responsively wraps them onto subsequent rows.Grid layout
Grid Layout 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-child Layout provides a parent content area alongside a dependent child content area and responsively stacks them at a given breakpoint.Split layout
Split Layout is a simple mechanism which arranges UI elements at opposite ends of a container.Stack layout
Stack Layout is a simple mechanism which arranges UI elements in either a horizontal or vertical order in a single line only.