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
.