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 | Default | Description |
|---|---|---|
| autoColumns: string | 'auto' | Sets the grid-auto-columns CSS property. See MDN for further information. |
| autoFlow: 'row' | 'column' | 'row dense' | 'column dense' | 'row' | Sets the grid-auto-flow CSS property. See MDN for further information. |
| autoRows: string | 'auto' | Sets the grid-auto-rows CSS property. See MDN for further information. |
| gap: '0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '1rem' | '1.5rem' | '2rem' | '3rem' | '4rem' | '5rem' | Gap | '0rem' | Sets the gap CSS property. See MDN for further information. |
| placeContent: 'normal' | 'start' | 'end' | 'center' | 'stretch' | 'space-between' | 'space-around' | 'space-evenly' | 'baseline' | object | 'normal' | Sets the place-content CSS property. See MDN for further information. |
| placeItems: 'normal' | 'start' | 'end' | 'center' | 'stretch' | 'baseline' | object | 'normal' | Sets the place-items CSS property. See MDN for further information. |
| 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 | 'div' | Sets a custom HTML tag. |
| children: node | Custom content inside the grid container. |
This compound component should be used when the decision to follow the Grid layout pattern is assumed only for the parent container. If the inner layout of a grid item does not make this same compromise and only features props related to the parent container, then that grid item should be wrapped with this component.
In case you are building a complex Grid layout with several nested grid containers, DxcGrid.GridItem becomes very limited and therefore, you will have to wrap the children with DxcGrid.
So, to fulfil that scenario, all the DxcGrid.GridItem's props are also available in DxcGrid.
| Name | Default | Description |
|---|---|---|
| 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. | |
| row: number | string | GridCell | Sets the grid-row CSS property. See MDN for further information. | |
| placeSelf: 'auto' | 'start' | 'end' | 'center' | 'stretch' | 'baseline' | object | 'auto' | Sets the place-self CSS property. See MDN for further information. |
| as: keyof HTMLElementTagNameMap | 'div' | Sets the a custom HTML tag. |
| children: node | Custom content inside the grid container. |