Grid

El grid responsive de Material Design se adapta al tamaño y orientación de la pantalla, garantizando la consistencia en todos los diseños.

La cuadrícula crea consistencia visual en la distribución de elementos a la vez que permite flexibilidad en una amplia variedad de diseños. Material Design's responsive UI is based on a 12-column grid layout.

⚠️ The Grid component shouldn't be confused with a data grid; it is closer to a layout grid. For a data grid head to the DataGrid component.

Cómo funciona

El sistema de cuadrícula se implementa con el componente Grid:

It uses CSS's Flexible Box module for high flexibility.
Hay dos tipos de layout:contenedores (containers) y elementos (items).
Item widths are set in percentages, so they're always fluid and sized relative to their parent element.
Los elementos tienen padding para crear el espacio entre los elementos individuales.
Hay cinco puntos de interrupción de la cuadrícula: xs, sm, md, lg y xl.
Se pueden dar valores enteros a cada punto de interrupción, indicando cuántas de las 12 columnas disponibles están ocupadas por el componente cuando el ancho de la vista se ajusta a las restricciones del breakpoint .

**Si recién comienzas y no estás familiarizado con flexbox **, te recomendamos leer la siguiente guía CSS-Tricks flexbox.

Espaciado

La cuadrícula responsive se centra en anchos de espaciado coherentes, en lugar de en el ancho de columna. Los márgenes y columnas de Material Design siguen una cuadrícula con línea-base cuadrada de 8dp. La propiedad de espaciado es un número entero entre 0 y 10 inclusive. Por defecto, el espaciado entre dos elementos de la cuadrícula sigue una función lineal: output(spacing)= spacing * 8px, por ejemplo, spacing={2} crea un espacio de 16px.

Esta función de transformación de la salida se puede personalizar usando el tema.

Grids fluidos

El fluid grid usa columnas que escalan y redimensionan el contenido. A fluid grid's layout can use breakpoints to determine if the layout needs to change dramatically.

Grid básica

Los anchos de las columnas son valores enteros entre 1 y 12; se aplican en cualquier punto de interrupción e indican cuántas columnas están ocupadas por el componente.

Un valor dado a un breakpoint se aplica a todos los demás breakpoints más anchos que él (a menos que se sobreescriba, como se puede leer despues en esta página). Por ejemplo, xs={12} escala un componente para ocupar el ancho de toda la vista independientemente de su tamaño.

⚠️ Missing demo `pages/components/grid/CenteredGrid.js` ⚠️

Grid con breakpoints

Algunas columnas tienen varios anchos definidos, causando que el layout cambie en el correspondiente breakpoint definido. Los valores de ancho, dados a breakpoints más grandes, anulan los dados breakpoints más pequeños.

Por ejemplo, xs={12} sm={6} escala un componente para ocupar la mitad del ancho de la vista (6 columnas) cuando el ancho de la vista es 600 o más píxeles. Para viweports mas pequeños, el componente rellena las 12 columnas disponibles.

xs=6 md=8

xs=6 md=4

xs=6 md=8

<Grid container spacing={2}>
  <Grid item xs={6} md={8}>
    <Item>xs=6 md=8</Item>
  </Grid>
  <Grid item xs={6} md={4}>
    <Item>xs=6 md=4</Item>
  </Grid>
  <Grid item xs={6} md={4}>
    <Item>xs=6 md=4</Item>
  </Grid>
  <Grid item xs={6} md={8}>
    <Item>xs=6 md=8</Item>
  </Grid>
</Grid>

Explora

Debajo de esta línea hay una demostración interactiva que permite explorar el resultado visual de las distintas configuraciones:

Cell 1

Cell 2

Cell 3

<Grid
  container
  direction="row"
  justifyContent="center"
  alignItems="center"
>

Auto-layout

El Auto-layout (autodiseño) hace que los items compartan el espacio disponible equitativamente. Esto también quiere decir que puede establecer el ancho de un item y los otro se dimensionarán a partir de él.

xs=6

<Grid container spacing={3}>
  <Grid item xs>
    <Item>xs</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>xs=6</Item>
  </Grid>
  <Grid item xs>
    <Item>xs</Item>
  </Grid>
</Grid>

Grid Compleja

El siguiente ejemplo no sigue las directrices de Material Design, pero ilustra cómo el grid puede ser usado para dar forma a layouts complejas.

Standard license

Full resolution 1920x1080 • JPEG

ID: 1030114

Remove

$19.00

Grid Anidada

Las propiedades container y item son booleaneas e independientes. Pueden ser combinadas.

Un contenedor de flex es la caja generada por un elemento con la propiedad computada display con el valor de flex o inline-flex. Los hijos en el flujo de un contenedor flex se denominan flex items y se establecen mediante el modelo de layout flex.

https://www.w3.org/TR/css-flexbox-1/#box-model

Item

<Grid container spacing={1}>
  <Grid container item spacing={3}>
    <FormRow />
  </Grid>
  <Grid container item spacing={3}>
    <FormRow />
  </Grid>
  <Grid container item spacing={3}>
    <FormRow />
  </Grid>
</Grid>

⚠️ Defining an explicit width to a Grid element that is flex container, flex item, and has spacing at the same time lead to unexpected behavior, avoid doing it:

<Grid spacing={1} container item xs={12}>

If you need to do such, remove one of the props.

Limitaciones

Margen negativo

Existe una limitación con el margen negativo que utilizamos para implementar el espaciado entre los elementos. Un scroll horizontal aparecerá si un margen negativo va más allá del <body>. Hay 3 soluciones disponibles:

No usar la función de espaciado e implementarla en el espacio de usuario spacing={0} (por defecto).

Aplicar padding al padre con al menos la mitad del valor de espaciado aplicado al hijo:

<body>
 <div style={{ padding: 20 }}>
   <Grid container spacing={5}>
     //...
    </Grid>
 </div>
</body>

Añadiendo overflow-x: hidden; al padre.

white-space: nowrap;

La configuración inicial en los elementos flex es min-width: auto. Esto causa un conflicto en el posicionamiento cuando el hijo está usando white-space: nowrap;. Puede experimentar este problema con:

<Grid item xs>
  <Typography noWrap>

Para que el item permanezca dentro del contenedor necesita establecer min-width: 0. Para que el item permanezca dentro del contenedor necesita establecer min-width: 0.

<Grid item xs zeroMinWidth>
  <Typography noWrap>

Truncation should be conditionally applicable on this long line of text as this is a much longer line than what the container can support.

direction: column | column-reverse

The xs, sm, md, lg, and xl props are not supported within direction="column" and direction="column-reverse" containers.

They define the number of grids the component will use for a given breakpoint. They are intended to control width using flex-basis in row containers but they will impact height in column containers. If used, these props may have undesirable effects on the height of the Grid item elements.

CSS Grid Layout

Material-UI doesn't provide any CSS Grid functionality itself, but as seen below you can easily use CSS Grid to layout your pages.

xs=8

xs=4

xs=8

<Box display="grid" gridTemplateColumns="repeat(12, 1fr)" gap={2}>
  <Box gridColumn="auto / span 8">
    <Item>xs=8</Item>
  </Box>
  <Box gridColumn="auto / span 4">
    <Item>xs=4</Item>
  </Box>
  <Box gridColumn="auto / span 4">
    <Item>xs=4</Item>
  </Box>
  <Box gridColumn="auto / span 8">
    <Item>xs=8</Item>
  </Box>
</Box>

API

<Grid />