example1.jsx

<FlexGrid limitWidth gutter={false}>
  <FlexGrid.Col span={12}>
    <Box horizontal={3}>
      <Paragraph>{text}</Paragraph>
    </Box>
  </FlexGrid.Col>

  <FlexGrid.Col span={columns}>
    <Box horizontal={3} vertical={3}>
      <Card>{text}</Card>
    </Box>
  </FlexGrid.Col>

  <FlexGrid.Col span={columns}>
    <Box horizontal={3} vertical={3}>
      <Card>{text}</Card>
    </Box>
  </FlexGrid.Col>

  <FlexGrid.Col span={columns}>
    <Box horizontal={3} vertical={3}>
      <Card>{text}</Card>
    </Box>
  </FlexGrid.Col>

  <FlexGrid.Col span={columns}>
    <Box horizontal={3} vertical={3}>
      <Card>{text}</Card>
    </Box>
  </FlexGrid.Col>
</FlexGrid>

example2.jsx

<FlexGrid limitWidth>
  <FlexGrid.Col span={12}>
    <Box vertical={3}>
      <Paragraph>{text}</Paragraph>
    </Box>
  </FlexGrid.Col>

  <FlexGrid.Col span={columns}>
    <Box vertical={3}>
      <Card>{text}</Card>
    </Box>
  </FlexGrid.Col>

  <FlexGrid.Col span={columns}>
    <Box vertical={3}>
      <Card>{text}</Card>
    </Box>
  </FlexGrid.Col>

  <FlexGrid.Col span={columns}>
    <Box vertical={3}>
      <Card>{text}</Card>
    </Box>
  </FlexGrid.Col>

  <FlexGrid.Col span={columns}>
    <Box vertical={3}>
      <Card>{text}</Card>
    </Box>
  </FlexGrid.Col>
</FlexGrid>