Grid
Type: React component
How to get Grid?
JavaScript
import { Grid } from 'fds/components';
A type of list that renders uniformly sized items horizontally, starts wrapping when exceeding the horizontally available space. This component should render GridItem components.
When a large amount of GridItem components are being rendered and render times and/or scrolling performance is poor, consider implementing a VirtualGrid instead.
Props
items
(Required)
Type: Object
An item with an identifier property, used to distinguish items from each other.
In some cases, the key of the "id" property is configurable using a "itemKeyToUseAsId" prop.
Properties
item
Size (Optional)
Type: String
The size in which the GridItem components should render. The possible values are:
-
'xs'
-
's'
-
'm'
-
'l'
Default value
-
max
Columns (Optional)
Type: Number
The maximum amount of columns with GridItem components before the list starts wrapping horizontally.
Default value
on
Item Click (Optional)
Type: Function
A callback that is called whenever a rendered item is clicked and is not in a disabled state.
Arguments
Default value
on
Item Double Click (Optional)
Type: Function
A callback that is called whenever a rendered item is double clicked and is not in a disabled state.
Arguments
Default value
padding
Size (Optional)
Type: Number | String | Object
The amount of padding rendered by the component.
This should be a either, A single size value, one of the following values:
-
0 (zero, no padding at all)
-
's' (small)
-
'm' (medium)
-
'l' (large) to set the paddingSize for the top, right, bottom and left side to a single shared value.
Or you can pass an object whose properties determine a specific padding size for either:
-
'horizontal': %single size value% to set the 'left' and 'right' padding to the given size value (one of the values listed above)
-
'vertical': %single size value% to set the 'top' and 'bottom' padding
Or you can pass any combination of 'bottom', 'horizontal', 'left', 'right', 'top', 'vertical', where the more specific keys override the generic (eg. setting 'left': 's' and 'horizontal': 'm' would result in a padding size of 's' for the left side and a size of 'm' for the right side.
Default value
-
render
Item (Required)
Type: Function
A callback that is called for each item in the items array, which should return an instance of GridItem.
Arguments
selected
Item (Optional)
Type: Object
The item that is visually presented in a selected state. Expects an item in the same shape as expected by the "items" property.
Default value
space
Size (Optional)
Type: Number | String
The amount of space (or margin) between the children of the component. Depending on the flexDirection value, either horizontal or vertical space is created.
This should be one of the following values:
-
0 (zero, no margin at all)
-
's' (small)
-
'm' (medium)
-
'l' (large)
Default value
-