Grid layout
Grid layout
GridLayout
and GridItem
manage the layout of the main content area in your application screen or webpage. It aligns content to a system of equally distributed columns and rows to create a cohesive and organized user interface. When combined with responsive breakpoints, You can configure GridLayout
to determine the display of specific content across different viewport sizes or device screen sizes.
- When it's best to display your content using a configurable number of columns and rows, such as a form or a dashboard.
- For content regions where you display blocks or groups of content alongside each other, such as the main content area of the application,
Dialog
, orDrawer
. - When users will access the application or webpage across different viewport, screen or device sizes.
GridLayout
controls how to display the content and responsively organize across the different spaces, ensuring a reliable, usable experience.
- To define the high-level layout of your application surrounding the content area (i.e., header, footer, navigation areas. Instead, use
BorderLayout
. - To lay out your content in a single dimension only, for example a horizontal summary bar containing a row of metric components, or a vertical stack of
Accordion
components. Instead, useStackLayout
,FlowLayout
orFlexLayout
.
To import GridLayout
and GridItem
from the core Salt package, use:
Name | Type | Description | Default |
---|
Name | Type | Description | Default |
---|
GridLayout
has a complementary layout grid style library for Figma. J.P. Morgan employees can enable the Salt Layout Grid library from the Assets panel. External designers can install the library from the Salt community page.
- When it's best to display your content using a configurable number of columns and rows, such as a form or a dashboard.
- For content regions where you display blocks or groups of content alongside each other, such as the main content area of the application,
Dialog
, orDrawer
. - When users will access the application or webpage across different viewport, screen or device sizes.
GridLayout
controls how to display the content and responsively organize across the different spaces, ensuring a reliable, usable experience.
- To define the high-level layout of your application surrounding the content area (i.e., header, footer, navigation areas. Instead, use
BorderLayout
. - To lay out your content in a single dimension only, for example a horizontal summary bar containing a row of metric components, or a vertical stack of
Accordion
components. Instead, useStackLayout
,FlowLayout
orFlexLayout
.
To import GridLayout
and GridItem
from the core Salt package, use:
Name | Type | Description | Default |
---|
Name | Type | Description | Default |
---|
GridLayout
has a complementary layout grid style library for Figma. J.P. Morgan employees can enable the Salt Layout Grid library from the Assets panel. External designers can install the library from the Salt community page.
- When it's best to display your content using a configurable number of columns and rows, such as a form or a dashboard.
- For content regions where you display blocks or groups of content alongside each other, such as the main content area of the application,
Dialog
, orDrawer
. - When users will access the application or webpage across different viewport, screen or device sizes.
GridLayout
controls how to display the content and responsively organize across the different spaces, ensuring a reliable, usable experience.
- To define the high-level layout of your application surrounding the content area (i.e., header, footer, navigation areas. Instead, use
BorderLayout
. - To lay out your content in a single dimension only, for example a horizontal summary bar containing a row of metric components, or a vertical stack of
Accordion
components. Instead, useStackLayout
,FlowLayout
orFlexLayout
.
To import GridLayout
and GridItem
from the core Salt package, use:
Name | Type | Description | Default |
---|
Name | Type | Description | Default |
---|
GridLayout
has a complementary layout grid style library for Figma. J.P. Morgan employees can enable the Salt Layout Grid library from the Assets panel. External designers can install the library from the Salt community page.