React: Grommet grid only responsive up to three columns

Question

I am using Grommet to build a dashboard with <Grid>.

If using three columns, responsive behaviour is as expected when the window is made smaller:

But if using four columns there is no breakpoint at which the cards stack on top of each other:

The code is out-of-the box and so the expectation is for the built-in responsive behaviour to kick-in:

<Grommet full theme={grommet}>
  <Page>
    <PageContent border={{"side":"bottom"}}>
      <Header align="center" direction="row" flex={false} justify="between" gap="medium">
        <Anchor label="Title" icon={<Home />}  />
        <Menu icon={<User />} items={[{"label":"sign out"}]} />
      </Header>
    </PageContent>
    <PageContent>
      <PageHeader title="Dashboard" margin={{"vertical":"medium"}} />
      <Grid columns="1/4" gap="medium">
          <Meditation />    
          <Habits />  
          <Chart />
          <Card><Text>Everything is ok!</Text></Card>

      </Grid>
    </PageContent>
  </Page>
  </Grommet>

(Each imported item is just a <Card pad="small">)