Container

When to use this component

Use the container component when you need a centralised, consistent layout wrapper for content on your webpage. This component is designed to ensure that content is properly contained within a maximum width (gi-container) and centered horizontally using auto margins (gi-mx-auto). It is ideal for sections where you want to maintain a uniform look and feel across your application, such as main content areas, sections of a page, or components that should be aligned in the centre. Additionally, the component's data-testid attribute (govie-container) is useful for testing purposes, allowing developers to easily target and test content wrapped within this container.

When not to use this component

Avoid using the container component if you need a flexible or dynamic layout that requires complex positioning, such as grids or flexbox-based structures. This component is not suitable for scenarios where you need to override the maximum width or margins frequently, or when the content needs to be fluid across the full width of the viewport. If your content does not require centralised alignment or if the predefined styles conflict with the specific requirements of your design, consider using a custom container or a different layout component that offers greater flexibility.