Debe comprender cómo funciona la red internamente. El diseño de Material UI Grid se basa en el modelo flexbox. Entonces, al establecer el atributo del contenedor en Grid, se establece "display flex" en él. Ahora los elementos en este cuadro flexible pueden fluir horizontal o verticalmente, por lo tanto, se puede dar un espacio horizontal o un espacio vertical, pero no ambos.

Si establece el atributo "dirección" en "columna" en Grid como se muestra:

 <Grid container direction={'column'} spacing={24}> <Grid item xl={6} md={6} sm={12} xs={12}> <TextField required id="outlined-email-input" label="Customer Name" name="email" fullWidth /> </Grid> <Grid item xl={6} md={6} sm={12} xs={12}> <TextField required id="outlined-email-input" label="Customer Name" name="email" fullWidth /> </Grid> </Grid>

Luego, el espacio proporcionado actuará como espacio vertical entre los elementos y los elementos se organizarán verticalmente.

Ahora, si se requiere que los elementos se organicen horizontalmente, el código anterior se cambiará como se muestra:

 <Grid container direction={'row'} spacing={24}> <Grid item xl={6} md={6} sm={12} xs={12}> <TextField required id="outlined-email-input" label="Customer Name" name="email" fullWidth /> </Grid> <Grid item xl={6} md={6} sm={12} xs={12}> <TextField required id="outlined-email-input" label="Customer Name" name="email" fullWidth /> </Grid> </Grid>

Aquí, en esta implementación, el espaciado actuará como espaciado horizontal. Además, esta es la implementación predeterminada si no especifica el atributo "dirección".

Ahora, para cambiar entre 2 diseños en dispositivos móviles y de escritorio, podemos hacerlo de la siguiente manera:

Implemente una clase css mediante una consulta de medios que establezca "display" en "ninguno" para dispositivos de tipo móvil e "inicial" para dispositivos de escritorio. Llamémoslo "display-lg". Y de manera similar, haga la clase "display-sm" que muestre el elemento en el móvil y lo oculte en el escritorio. Aplique "display-lg" en el diseño de cuadrícula que se mostrará en el escritorio y "display-sm" en el diseño de cuadrícula que se mostrará en el dispositivo móvil. Este enfoque puede parecerle largo y redundante, pero le brinda la libertad de agregar más cambios específicos para dispositivos móviles en su diseño en el futuro.

Siéntase libre de comentar si necesita más claridad en la respuesta.

Sí, me pregunto lo mismo, los documentos implican que Grid se basa en un diseño de 12 "columnas". Entonces, cuando desea una división horizontal de 75/25 entre dos componentes, es tan fácil como xs = {8} y el otro conjunto en xs = {4}.

Creo que OP pregunta cómo hacer lo mismo pero verticalmente. Yo también estoy buscando una solución, pero creo que el método no se encuentra dentro del componente Grid. Intentaré usar CSS adicional para resolver el problema que tengo.

EDITAR: Sí, parece que no hay forma de hacer esto dentro del componente en sí. De la documentación

Las propiedades que definen la cantidad de cuadrículas que usará el componente para un punto de interrupción determinado (xs, sm, md, lg y xl) se enfocan en controlar el ancho y no tienen efectos similares en la altura dentro de los contenedores de columna y columna inversa. Si se usan dentro de contenedores de columnas o columnas inversas, estas propiedades pueden tener efectos no deseados en el ancho de los elementos Grid.

Esto es posible en MUI v5 , simplemente use rowSpacing y columnSpacing en lugar de spacing . Vea este ejemplo de los documentos:

 <Grid container rowSpacing={1} columnSpacing={3}> <Grid item xs={6}> <Item>1</Item> </Grid> <Grid item xs={6}> <Item>2</Item> </Grid> <Grid item xs={6}> <Item>3</Item> </Grid> <Grid item xs={6}> <Item>4</Item> </Grid> </Grid>

Demo en vivo