This is just a suggestion, so feel free to close this if you consider it spam, but i think grommet's "areas" prop for the grid component is very intuitive and gives you a sense of how the whole grid is structured in one place

<Grid
  rows={['xxsmall', 'xsmall']}
  columns={['xsmall', 'small']}
  gap="small"
  areas={[
    { name: 'header', start: [0, 0], end: [1, 0] },
    { name: 'nav', start: [0, 1], end: [0, 1] },
    { name: 'main', start: [1, 1], end: [1, 1] },
  ]}
>
  <Box gridArea="header" background="brand" />
  <Box gridArea="nav" background="light-5" />
  <Box gridArea="main" background="light-2" />
</Grid>

And that it would be very nice to have it in this project. Maybe if i had the time i'd implement it myself if it makes sense for this codebase, but unfortunately i don't have it right now, so it's just a suggestion for the time being. Great project by the way.