Como puede ver en la siguiente img, estoy tratando de alinear "Nª de ticket" y "Email", usando Grid:
<Grid container direction="row" justifyContent="flex-start" alignItems="stretch" style={{ padding: "1.5em" }} > <div> <span>ID</span> <p style={{ color: "gray" }}>{props._id}</p> </div> <div> <span>N° de ticket</span> <p style={{ color: "gray" }}>{props._id}</p> </div> </Grid> <Grid container direction="row" justifyContent="space-between" alignItems="center" style={{ padding: "1.5em" }} > <div> <span>Fecha de nacimiento</span> <p style={{ color: "gray" }}>{props.birthdate}</p> </div> <div> <span>Email</span> <p style={{ color: "gray" }}>{props.email}</p> </div> <div> <span>Teléfono</span> <p style={{ color: "gray" }}>{props.phone}</p> </div> </Grid>¿Cómo puedo alinear las dos filas?
Intente optar por la sintaxis;
<!DOCTYPE html> <html> <head> <style> .grid-container { display: grid; grid-template-columns: auto auto auto; background-color: #2196F3; padding: 10px; } .grid-item { background-color: rgba(255, 255, 255, 0.8); padding: 20px; font-size: 30px; text-align: center; } </style> </head> <body> <h1>Grid</h1> <div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> <div class="grid-item">6</div> <div class="grid-item">7</div> <div class="grid-item">8</div> <div class="grid-item">9</div> </div> </body> </html>El diseño de cuadrícula es una forma de diseñar su contenido html con CSS similar a flexbox .
Por lo tanto, para lograr el objetivo deseado, debe agregar un contenedor (por ejemplo, un elemento <div> ) y agregar el estilo necesario al CSS.
¡DYNAMICMORTAL le proporcionó un ejemplo complementario que también podría ser de ayuda!