I am attempting to build out an 8pt grid system based on css-grid. I'm making use of react and styled components (don't think this matters much) and am having some issues understanding the general process behind element placement.

Bare in mind, this is for mobile(ionic) and am not so concerned with desktop alignments.

Because of this, I'm only working with pixels/percentages.

I was planning on creating a container, row and column components respectively.

What's got me confused is as follows. I'm unsure of how my end user (another developer) would be placing items. ex: A user wants to place a button at the bottom of the screen.

Is this something the user would do as follows?

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

Or this solution.

<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>

I'm trying to figure out if I'm heading in the right direction with one of these markup solutions.

My initial plan, was to grab the current mobile devices (vertical) width and ensure it is naturally divisible by 8 and then make use of percentages. I was wondering if this is the correct direction to go about handling 8pt grid styling.

Thank you.