Estoy intentando construir un sistema de cuadrícula de 8 puntos basado en css-grid. Estoy haciendo uso de componentes de reacción y estilo (no creo que esto importe mucho) y tengo algunos problemas para comprender el proceso general detrás de la colocación de elementos.

Tenga en cuenta que esto es para dispositivos móviles (ionic) y no me preocupan tanto las alineaciones de escritorio.

Debido a esto, solo trabajo con píxeles/porcentajes.

Estaba planeando crear componentes de contenedor, fila y columna respectivamente.

Lo que me tiene confundido es lo siguiente. No estoy seguro de cómo colocaría los elementos mi usuario final (otro desarrollador). ej: un usuario quiere colocar un botón en la parte inferior de la pantalla.

¿Es esto algo que el usuario haría de la siguiente manera?

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

O esta solución.

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

Estoy tratando de averiguar si voy en la dirección correcta con una de estas soluciones de marcado.

Mi plan inicial era tomar el ancho (vertical) de los dispositivos móviles actuales y asegurarme de que sea naturalmente divisible por 8 y luego hacer uso de porcentajes. Me preguntaba si esta es la dirección correcta para manejar el estilo de cuadrícula de 8 puntos.

Gracias.