The grid component is a powerful layout tool that simplifies the creation of complex and responsive designs. It allows developers to create structured layouts using rows and columns, making it easier to manage spacing and alignment within a design.
The grid layout module is a two-dimensional layout system for the web. It allows you to create complex layouts using rows and columns, making it easier to design responsive web pages. The grid layout provides a more efficient way to align and distribute space among items in a container, even when their size is unknown or dynamic.
Below, we share a series of essential links to help you understand and use the grid component correctly. If you are not acquainted with these concepts, we strongly recommend taking a moment to review them:
- Use grid for complex layouts: the grid component is ideal for creating complex layouts with multiple rows and columns. It allows you to create responsive designs that adapt to different screen sizes.
- Keep it simple: while the grid component is powerful, it's essential to keep your layouts as simple as possible. Avoid overcomplicating your designs with too many nested grids or complex structures, which can reduce the readability and maintainability of your code.
- Use grid items correctly: they are represented by the
DxcGrid.Itemtag and should be used when the decision to follow the Grid layout pattern is assumed only by the parent container. Ensure that you use the grid items correctly within the grid container. The grid items should be direct descendants of the grid container to ensure proper alignment and spacing. - Prioritize fluidity over fixed sizes: avoid using fixed widths or heights when possible, as they can lead to layout issues on different devices. Instead, leverage grid properties like
templateColumns,templateRows, andtemplateAreasto create scalable designs. - Use grid gaps wisely: the grid component provides a gap property to control spacing between items. Use this property to create consistent spacing between items and avoid excessive margins or padding.
- Leverage alignment and justification: use
placeContentandplaceItemsstrategically to control content positioning within the grid container, ensuring a well-structured and visually balanced layout. - Ensure consistency with design tokens: whenever possible, use the design tokens provided by the Halstack Design System to maintain visual and functional consistency across applications, even though the component allows custom values.
- Combine with other layout techniques: grid is powerful but not always the best tool for every scenario. Consider using the flex component instead for one-dimensional layouts or stacked components with simpler structures.