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.
GridLayout
defaults to a 12-column grid with one row. The spacing between rows and columns depends on the prop gap
, which is 3 by default.
Content in GridLayout
is inside GridItem
components. This helps control the size and position of content.
- We recommend
GridItem
components for displaying content in the layout. If the layout is very simple (i.e., doesn't span multiple columns or rows), you can place content (e.g., components, text, divs, etc) directly into theGridLayout
component. - Any items displayed beyond 12 columns (or the number of defined columns) will wrap to a subsequent row.
- Use
columnGap
androwGap
properties to set a specific gap in a particular dimension orgap
to update both values simultaneously.
Use grid layout column
and row
properties to control the number of columns and rows in the layout.
The grid layout’s responsive properties allow you to customize specific properties of the grid (such as the number of columns and rows) per breakpoint.
You can use the default Salt breakpoints or pass in your own using SaltProvider
.
A responsive property is a property that takes either multiple values (one value per breakpoint) or a single value that would take effect across all different screen sizes. An example is a layout that will responsively change from 12 columns to two and then to one as the space decreases:
- Use the grid layout’s responsive properties when the flow of the grid is dependent on the viewport size, such as when a user typically resizes their application or webpage and content needs to remain visible.
- Define specific layout behaviors per breakpoint to optimize the content display across different device sizes.
Although it is possible to use GridLayout
without using GridItem
, we strongly recommend that you wrap items with the GridItem
component. Using a grid item, you can control the size and position of content in the grid. By default, a grid item will span one column and one row. Use the colSpan
and rowSpan
props to increase the size of individual items to span multiple rows and columns.
Spanning multiple columns and rows is an effective way to drive visual hierarchy in the layout. For example, grid items at the top of an analytical dashboard are typically larger in size to emphasize data visualizations, such as charts or metrics.
Use the colSpan
and rowSpan
props to dynamically control the size of an item in the grid to show more or less content to the user. This example shows how to expand a grid item in the layout and reposition surrounding grid items at the same time.
Use the verticalAlignment
and horizontalAlignment
props to control the position of content in the grid layout.
The columns
and rows
props allow you to pass a string to define a column or row template.
GridLayout
defaults to a 12-column grid with one row. The spacing between rows and columns depends on the prop gap
, which is 3 by default.
Content in GridLayout
is inside GridItem
components. This helps control the size and position of content.
- We recommend
GridItem
components for displaying content in the layout. If the layout is very simple (i.e., doesn't span multiple columns or rows), you can place content (e.g., components, text, divs, etc) directly into theGridLayout
component. - Any items displayed beyond 12 columns (or the number of defined columns) will wrap to a subsequent row.
- Use
columnGap
androwGap
properties to set a specific gap in a particular dimension orgap
to update both values simultaneously.
Use grid layout column
and row
properties to control the number of columns and rows in the layout.
The grid layout’s responsive properties allow you to customize specific properties of the grid (such as the number of columns and rows) per breakpoint.
You can use the default Salt breakpoints or pass in your own using SaltProvider
.
A responsive property is a property that takes either multiple values (one value per breakpoint) or a single value that would take effect across all different screen sizes. An example is a layout that will responsively change from 12 columns to two and then to one as the space decreases:
- Use the grid layout’s responsive properties when the flow of the grid is dependent on the viewport size, such as when a user typically resizes their application or webpage and content needs to remain visible.
- Define specific layout behaviors per breakpoint to optimize the content display across different device sizes.
Although it is possible to use GridLayout
without using GridItem
, we strongly recommend that you wrap items with the GridItem
component. Using a grid item, you can control the size and position of content in the grid. By default, a grid item will span one column and one row. Use the colSpan
and rowSpan
props to increase the size of individual items to span multiple rows and columns.
Spanning multiple columns and rows is an effective way to drive visual hierarchy in the layout. For example, grid items at the top of an analytical dashboard are typically larger in size to emphasize data visualizations, such as charts or metrics.
Use the colSpan
and rowSpan
props to dynamically control the size of an item in the grid to show more or less content to the user. This example shows how to expand a grid item in the layout and reposition surrounding grid items at the same time.
Use the verticalAlignment
and horizontalAlignment
props to control the position of content in the grid layout.
The columns
and rows
props allow you to pass a string to define a column or row template.
GridLayout
defaults to a 12-column grid with one row. The spacing between rows and columns depends on the prop gap
, which is 3 by default.
Content in GridLayout
is inside GridItem
components. This helps control the size and position of content.
- We recommend
GridItem
components for displaying content in the layout. If the layout is very simple (i.e., doesn't span multiple columns or rows), you can place content (e.g., components, text, divs, etc) directly into theGridLayout
component. - Any items displayed beyond 12 columns (or the number of defined columns) will wrap to a subsequent row.
- Use
columnGap
androwGap
properties to set a specific gap in a particular dimension orgap
to update both values simultaneously.
Use grid layout column
and row
properties to control the number of columns and rows in the layout.
The grid layout’s responsive properties allow you to customize specific properties of the grid (such as the number of columns and rows) per breakpoint.
You can use the default Salt breakpoints or pass in your own using SaltProvider
.
A responsive property is a property that takes either multiple values (one value per breakpoint) or a single value that would take effect across all different screen sizes. An example is a layout that will responsively change from 12 columns to two and then to one as the space decreases:
- Use the grid layout’s responsive properties when the flow of the grid is dependent on the viewport size, such as when a user typically resizes their application or webpage and content needs to remain visible.
- Define specific layout behaviors per breakpoint to optimize the content display across different device sizes.
Although it is possible to use GridLayout
without using GridItem
, we strongly recommend that you wrap items with the GridItem
component. Using a grid item, you can control the size and position of content in the grid. By default, a grid item will span one column and one row. Use the colSpan
and rowSpan
props to increase the size of individual items to span multiple rows and columns.
Spanning multiple columns and rows is an effective way to drive visual hierarchy in the layout. For example, grid items at the top of an analytical dashboard are typically larger in size to emphasize data visualizations, such as charts or metrics.
Use the colSpan
and rowSpan
props to dynamically control the size of an item in the grid to show more or less content to the user. This example shows how to expand a grid item in the layout and reposition surrounding grid items at the same time.
Use the verticalAlignment
and horizontalAlignment
props to control the position of content in the grid layout.
The columns
and rows
props allow you to pass a string to define a column or row template.