Grid is a component that exposes grid system props. See the CSS Tricks Complete Guide to Grid to learn more about Grid Layout.
Use Box instead.
Before
<Grid gridTemplateColumns="repeat(2, auto)" gridGap={3}><Box p={3} color="fg.onEmphasis" bg="accent.emphasis">1</Box><Box p={3} color="fg.onEmphasis" bg="attention.emphasis">2</Box></Grid>
After
<Box display="grid" gridTemplateColumns="repeat(2, auto)" gridGap={3}><Box p={3} color="fg.onEmphasis" bg="accent.emphasis">1</Box><Box p={3} color="fg.onEmphasis" bg="attention.emphasis">2</Box></Box>
<Grid gridTemplateColumns="repeat(2, auto)" gridGap={3}><Box p={3} color="fg.onEmphasis" bg="accent.emphasis">1</Box><Box p={3} color="fg.onEmphasis" bg="attention.emphasis">2</Box></Grid>
Grid components get GRID, COMMON, and LAYOUT system props.
Read our System Props doc page for a full list of available props.
Grid does not get any additional props other than the system props mentioned above.