GridSubgrid

GridSubgrid is a component that is a combination of props available on Grid and GridItem, allowing your nested grid to align with the parent grid’s tracks, rather than creating its own independent tracks.

All docs for GridSubgrid will use a Grid component as a parent. This is to ensure that the GridSubgrid is rendered correctly.

There is comprehensive documentation available for subgrids available on MDN Web Docs , but in brief: you can “nest” grids by making a grid item a grid container. This grid, however, would be independent of the parent grid and of any other grid items, meaning that it would not take its track sizing from the parent grid. This makes it difficult to line nested grid items up with the main grid. If you set the value subgrid on grid-template-columns, grid-template-rows or both, however, instead of creating a new track listing, the nested grid uses the tracks defined on the parent.

Basic Usage

This example tracks the example from the MDN Web Docs on Subgrid . The grid layout has nine 1fr column tracks and four rows.

GridSubgrid is placed between column lines 2 to 7 and rows 2 to 4. This item is itself specified as a grid and then defined as a subgrid by giving it column tracks that are a subgrid (gridTemplateColumns="subgrid") and normally defined rows. The subgrid has five-column tracks as it spans five column tracks.

Because this is a subgrid, even though the GridItem is not a direct child of the outer Grid, it can be placed on that outer grid, with its columns aligned with the outer grid’s columns. The rows are not a subgrid, so behave as a nested grid normally does. The grid area on the parent expands to be large enough for this nested grid.

Note that the example uses custom styling to make the grid and items visible.

<Grid
    gridTemplateRows="repeat(4, minmax(100px, auto))"
    gridTemplateColumns="repeat(9, 1fr)"
>
    <GridSubgrid
        gridColumn="2 / 7"
        gridRow="2 / 4"
        gridTemplateColumns="subgrid"
        gridTemplateRows="repeat(3, 80px)"
        gap="none"
    >
        <GridItem gridColumn="3 / 6" gridRow="1 / 3"></GridItem>
    </GridSubgrid>
</Grid>

Full API

AttributesProps: {
  'id': 'close-button',
  'aria-label': 'Close button',
  'data-testid': 'close-button'
};