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.
The Grid component allows for both row and column layouts while allowing for a lot of flexibility of item placement within the grid itself.
The layout type can be specified using the grid-auto-flow property. This property lets you control how the auto-placement algorithm works, determining exactly how auto-placed items get flowed into the grid. Use the gap property to set the space between items and the placement properties placeContent and placeItems for more specific controls of how individual items stack or align within the grid.
You can use templates to define grid areas, columns, and rows. The grid-template-areas property is used to establish cells within a grid and assign them names. grid-template-columns defines the line names and track sizing functions of the grid columns while grid-template-rows defines the line names and track sizing functions of the grid columns.
The Grid items are direct descendants of a grid container. They are represented by the DxcGrid.Item tag and should be used when the decision to follow the Grid layout pattern is assumed only by the parent container.
In case you are building a complex Grid layout with several nested grid containers, DxcGrid.Item becomes very limited and therefore, you will have to wrap the children with DxcGrid.