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.