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. |
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 | 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. |