The layout grid is a responsive framework that organises child elements into rows and columns. By default, any component slotted into the grid is positioned automatically using its default column span, column width, and grid spacing.

The layout grid ensures consistent alignment and spacing without the need for manual width or margin calculations.

For greater control over placement, the layout grid item lets you define a specific column span or row span, as well as a starting column or starting row.

This combination allows you to create simple layouts quickly, while still having the flexibility to fine-tune individual item positions when needed.

Use the layout grid when you need to arrange content in a clear, consistent structure that adapts to different screen sizes.

The layout grid works well for organising related content into rows and columns, such as sets of cards, images, or form fields, while ensuring the layout remains readable and balanced at all breakpoints.

Use the layout grid item when you need explicit control over an element's column or row span, or its starting column or row, rather than relying on the default automatic placement.

Avoid using the layout grid for very simple layouts that can be achieved with a single column and standard spacing utilities, as the extra structure may be unnecessary.

It may also not be the best choice for highly bespoke designs where precise positioning or unconventional spacing falls outside the grid's responsive rules.

In components or sections that already have a fixed internal layout, adding a grid can introduce complexity without improving clarity. Similarly, if a basic flex or stack arrangement is sufficient to align content, using the full layout grid may create more code and configuration than needed.

It is not necessary to use a layout grid item to position an element which already automatically gets positioned correctly, using the default width, default column span, and default positioning.

The layout grid acts as the main container, arranging its child elements into responsive rows and columns. You can set the number of columns using thecolumns property, and the spacing using thegrid-spacing property. When customising the columns and spacing, you should follow the layout and spacing guidance .

Items are automatically positioned within the grid. For fluid grids, this means reflowing as the screen size changes – for example, stacking vertically on small screens and displaying in multiple columns on larger displays.

The layout grid item can be used when you need precise control over how an element sits within the grid. It allows you to define a specific column span or row span, and choose the starting column or row for that element. This is useful for creating more complex arrangements, such as highlighting a feature block that spans multiple columns, or positioning an item in a specific spot within the grid.