Grid
Grid allows users to build applications based on CSS Grid Layout. It is a technical component that abstracts users from working directly with CSS Grid properties and allows them to write more consistent and semantic layouts.
| Name | Type | Description | Default |
|---|---|---|---|
| autoColumns | string | Sets the grid-auto-columns CSS property. See MDN for further information. | 'auto' |
| autoFlow | 'row' | 'column' | 'row dense' | 'column dense' | Sets the grid-auto-flow CSS property. See MDN for further information. | 'row' |
| autoRows | string | Sets the grid-auto-rows CSS property. See MDN for further information. | 'auto' |
| gap | '0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem' | Gap | Sets the gap CSS property. See MDN for further information. It can be either a value from the range or an object with the following properties:
| '0rem' |
| placeContent | 'normal' | 'start' | 'end' | 'center' | 'stretch' | 'space-between' | 'space-around' | 'space-evenly' | 'baseline' | PlaceContent | Sets the place-content CSS property. See MDN for further information. It can be either a value from the range or an object with the following properties:
| 'normal' |
| placeItems | 'normal' | 'start' | 'end' | 'center' | 'stretch' | 'baseline' | PlaceItems | Sets the place-items CSS property. See MDN for further information. It can be either a value from the range or an object with the following properties:
| 'normal' |
| templateAreas | string[] | Sets the grid-template-areas CSS property. See MDN for further information. | - |
| templateColumns | string[] | Sets the grid-template-columns CSS property. See MDN for further information. | - |
| templateRows | string[] | Sets the grid-template-rows CSS property. See MDN for further information. | - |
| as | keyof HTMLElementTagNameMap | Sets a custom HTML tag. | 'div' |
Required | React.ReactNode | Custom content inside the grid container. | - |
Compound component representing a child of a grid container. It provides specific placement controls of how individual items stack or align within the grid.
Every DxcGrid.Item's prop is also available in DxcGrid to facilitate the nesting of grid containers.
| Name | Type | Description | Default |
|---|---|---|---|
| areaName | string | Sets the name of an item so that it can be referenced by a template created with the grid-template-areas property. | - |
| column | number | string | GridCell | Sets the grid-column CSS property. See MDN for further information. It can be either a value from the range or an object with the following properties:
| - |
| row | number | string | GridCell | Sets the grid-row CSS property. See MDN for further information. It can be either a value from the range or an object with the following properties:
| - |
| placeSelf | 'auto' | 'start' | 'end' | 'center' | 'stretch' | 'baseline' | PlaceSelf | Sets the place-self CSS property. See MDN for further information. It can be either a value from the range or an object with the following properties:
| 'auto' |
| as | keyof HTMLElementTagNameMap | Sets a custom HTML tag. | 'div' |
Required | React.ReactNode | Custom content inside the grid item container. | - |