在 8pt 网格中正确放置项目？

Question

我正在尝试构建一个基于 css-grid 的 8pt 网格系统。 我正在使用 react 和 styled 组件（不要认为这很重要）并且在理解元素放置背后的一般过程时遇到了一些问题。

请记住，这是针对移动设备（离子）的，我不太关心桌面对齐方式。

因此，我只使用像素/百分比。

我打算分别创建一个容器、行和列组件。

让我感到困惑的是如下。 我不确定我的最终用户（另一位开发人员）将如何放置物品。 例如：用户想要在屏幕底部放置一个按钮。

这是用户会做的事情吗？

<Container>
  <Row s={8}>
    <Col row={8} s={4}>
      <GridItem start={2} end={3}>
        <Button />
      </GridItem>
    </Col>
  </Row>
</Container>

或者这个解决方案。

<Container>
  <Row s={8}>
    <Col ></Col>
    <Col ></Col>
    <Col ></Col>
    <Col ></Col>
    <Col ></Col>
    <Col ></Col>
    <Col ></Col>
    <Col s={4} >
    <GridItem start={2} end={3}>
        <Button />
      </GridItem>
    </Col>
  </Row>
</Container>

我试图弄清楚我是否使用这些标记解决方案之一朝着正确的方向前进。

我最初的计划是获取当前移动设备（垂直）的宽度并确保它自然可被 8 整除，然后使用百分比。 我想知道这是否是 go 关于处理 8pt 网格样式的正确方向。

谢谢你。