JavaScript – Proper placement of objects in 8pt grid?

I am trying to create an 8pt grid system based on css-grid. I’m using reactive and styling components (it doesn’t seem to matter much) and I have some problems understanding the general process behind the element space.

Keep in mind, this is for mobile (Ionic) and I’m not too worried about desktop alignments.

Because of this, I’m only working with pixels / percent.

I was planning to make a container, row and column components, respectively.

The thing that confused me is the following. I’m not sure how my end user (another developer) will handle the items. For example: A user wants to place a button at the bottom of the screen.

Will some of these users do the following?

<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 going in the right direction with one of these markup solutions.

My initial plan was to capture the current mobile devices (vertical) width and make sure it was naturally divided by 8 and then use percent. I was wondering if this is the right direction to handle 8pt grid style.

Thanks

Write a Comment