CSS Subgrid compatibility in Chakra UI Grid component

[veloware]

Hi, we are using the Grid component quite heavily within our project, but one of the painpoints is that in order to meet our design requirements, we need nested sub components to be aware of the parent grid. My understanding is that with Grid and GridItems, where GridItems must only be one layer below the Grid.

With the introduction of CSS Subgrid (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid) this seems to allow nested children to be aware of the parent grid layout.

Will Chakra's Grid handle this out of the box?

[moeriki]

It works OOTB. Just remember subgrid should be nested directly under its parent grid. So you can't use the GridItem component inside the parent.

<Grid>
	<Grid gridRow="span 2" templateRows="subgrid">
		<GridItem>1</GridItem>
		<GridItem>2</GridItem>
	</Grid>
	<Grid gridRow="span 2" templateRows="subgrid">
		<GridItem>1</GridItem>
		<GridItem>2</GridItem>
	</Grid>
</Grid>

[veloware]

Ah OK, didn't realise that the subgrid has to be a direct child of the parent grid, thanks for pointing that out. I think that screws up my plans for fixing our grid layouts. Thanks!