La cuadrícula crea coherencia visual entre los diseños al tiempo que permite flexibilidad en una amplia variedad de diseños. La interfaz de usuario receptiva de Material Design se basa en un diseño de cuadrícula de 12 columnas.
El sistema grid se implementa con el componente Grid:
Utiliza el módulo Caja Flexible de CSS para una alta flexibilidad. Hay dos tipos de diseño: contenedores y artículos. Los anchos de los elementos se establecen en porcentajes, por lo que siempre son fluidos y tienen un tamaño relativo a su elemento principal. Los elementos tienen relleno para crear el espacio entre los elementos individuales. Hay cinco puntos de interrupción de cuadrícula: xs, sm, md, lg y xl.
Una caja es solo eso, una caja. Es un elemento envuelto alrededor de su contenido que por sí mismo no contiene reglas de estilo ni tiene efectos predeterminados en la salida visual. Pero es un lugar para poner reglas de estilo según sea necesario. No ofrece ninguna funcionalidad real, solo un marcador de posición para controlar los estilos en la estructura de marcado jerárquico.
A menudo lo considero semánticamente similar al elemento vacío JSX:
<> Some elements here </>Pero solo con algunas capacidades de Material UI:
<Box component="span" m={1}> <Button /> </Box>En breve:
Box es un reemplazo más poderoso, conveniente y potencial para div . Puede cambiarlo a cualquier elemento HTML (por ejemplo, span ), pero la mayoría de las veces lo usará como reemplazo de div .
Grid es el azúcar sintáctico de Grid Layout .
Utilice Box cuando desee agrupar varios elementos y controlar cómo se ven en la página. Por ejemplo, puede tomar varios párrafos y usar un cuadro para ponerles un borde.
Use Grid para configurar un sistema de diseño de cuadrícula para organizar el contenido en columnas en la página. Los diseñadores dividirán la página en 12 columnas con la idea de que es más atractivo visualmente tener el contenido alineado a lo largo de cada columna o grupo de columnas. Aquí hay un artículo que brinda muchos más detalles sobre el tema: https://www.interaction-design.org/literature/article/the-grid-system-building-a-solid-design-layout
Caja
El componente Box sirve como un componente contenedor para la mayoría de las necesidades de la utilidad CSS. El componente Box empaqueta todas las funciones de estilo que se exponen en @material-ui/system. Se crea usando la función styled() de @material-ui/core/styles
Cuadrícula
GridBox es la representación de bajo nivel de Grid. A excepción de la manipulación de expresiones de notebook de bajo nivel, no debería ser necesario usar GridBox directamente. En un cuaderno, las columnas de un GridBox se pueden agregar usando y las filas usando . o se puede usar un elemento de menú para comenzar a construir un GridBox.
El componente Box sirve como un componente contenedor para la mayoría de las necesidades de la utilidad CSS.
El componente Box envuelve su componente. Crea un nuevo elemento DOM, un <div> por defecto que se puede cambiar con la propiedad del componente.
Digamos que quieres usar un <span> en su lugar:
<Box component="span" m={1}> <Button /> </Box>Esto funciona muy bien cuando los cambios se pueden aislar en un nuevo elemento DOM. Por ejemplo, puede cambiar el margen de esta manera.
La cuadrícula de diseño sensible de Material Design se adapta al tamaño y la orientación de la pantalla, lo que garantiza la coherencia en todos los diseños.
La cuadrícula crea coherencia visual entre los diseños al tiempo que permite flexibilidad en una amplia variedad de diseños. La interfaz de usuario receptiva de Material Design se basa en un diseño de cuadrícula de 12 columnas.
Cómo funciona
El sistema grid se implementa con el componente Grid: