Saltar al contenido principal

Composición y disposición de cuadrícula

Composición y disposición de cuadrícula en Storybook

Descripción general​

GridLayout extiende el componente Grid y simplifica su uso. Se recomienda utilizar GridLayout al crear composiciones y disposiciones, ya que se pueden obtener prácticamente los mismos resultados que cuando se usa Grid, pero con una mayor facilidad de configuración y mantenimiento. Cambie a Grid si la composición y disposición es más compleja.

<GridLayout columns={[1, 1]}>
  <SomeElement />
  <SomeElement />
</GridLayout>
Note: GridLayout encapsula automáticamente cualquier elemento secundario en un componente GridItem, por eso, puede pasar cualquier elemento como secundario. O bien, puede pasar directamente componentes GridItem y obtener un control adicional.

Mientras controla la composición y disposición general en el nivel GridLayout, puede extender o anular esta configuración en el nivel GridItem. Consulte los ejemplos siguientes para obtener más detalles.

Configuración de propiedades secundarias​

La posición y el comportamiento de un componente se pueden modificar encapsulándolo en un componente GridItem. Por ejemplo, para que uno de los componentes tenga dos columnas de ancho, puede escribir:

<GridLayout
  columns={[1, 1]}
  id="grid-layout">
  <GridItem colSpan={2}> 
    {   /* Item content */ }
  <GridItem>
  <GridItem> 
    {   /* Item content */ }
  <GridItem>
  <GridItem > 
    {   /* Item content */ }
  <GridItem>
</GridLayout>

Consulte la página Cuadrícula para obtener más información acerca de GridItem.

Como alternativa, dado que GridLayout encapsula automáticamente cualquier elemento secundario en un componente GridItem, puede definir las propiedades para todos sus elementos secundarios en un solo lugar utilizando la propiedad gridItems para GridLayout.

<GridLayout
  columns={[1, 1]}
  gridItems={[{ colSpan: 2 }, null, null]}
  id="grid-layout">
  <SomeElement /> { /* will be 2-column wide */}
  <SomeElement />
  <SomeElement /> 
</GridLayout>

Propiedad defaultGridItem​

Utilizando la propiedad defaultGridItem en el nivel GridLayout, puede definir la configuración predeterminada que se aplicará a cualquier elemento secundario en caso de que no se aplique ninguna otra invalidación.

En este ejemplo, se define la configuración predeterminada y un valor diferente para el segundo elemento secundario.

<GridLayout
  columns={[1, 1]}
  defaultGridItem={{ colSpan: 2, clone: false }}
  gridItems={[null, { colSpan: 1 }]}
  id="grid-layout">
  <SomeElement />
  <SomeElement />
</GridLayout>

Opción de clonación GridItem​

Warning: GridItem pasa una propiedad style a un componente encapsulado. Luego, el componente tiene que pasarla a la etiqueta HTML subyacente. Si no lo hace (algunos componentes de Jutro no lo hacen), intente pasar clone={false} a GridItem:
<GridItem
  colSpan={2}
  clone={false}>
  <SomeElement />
</GridItem>

Entonces SomeElement se contendrá en un <div> adicional que, por el contrario, tiene estilo.

Anidado de varios componentes GridLayout​

Es posible colocar GridLayouts dentro de otro GridLayout para implementar diseños más complejos:

<GridLayout
  columns={[1, 1]}
  id="grid-layout">
  <GridLayout id="column-1">
    <SomeElement />
    <SomeElement />
  </GridLayout>
  <GridLayout id="column-2">
    <SomeElement />
    <SomeElement />
  </GridLayout>
</GridLayout>