Cuadrícula

Cuadrícula en Storybook

Uso

El componente Grid es un componente técnico que facilita el uso del estilo CSS de la cuadrícula. Para obtener recomendaciones de uso, consulte la documentación oficial de la disposición y composición de cuadrícula de CSS.

Código

import { Grid, GridItem } from '@jutro/layout';

<Grid>
  <GridItem>
    <span>First Item</span>
  </GridItem>
  <GridItem>
    <span>Second Item</span>
  </GridItem>
  <GridItem>
    <span>Third Item</span>
  </GridItem>
</Grid>;

Instrucción de importación

import { Grid, GridItem } from '@jutro/layout';

Contrato de componentes

Asegúrese de comprender la superficie de la API de componentes del sistema de diseño, así como sus implicaciones, ventajas y desventajas. Obtenga más información en nuestra introducción a la API de componentes.

Propiedades

Cuadrícula

autoRows

Tipo

array

Descripción

Defines implicit rows.

blockPointerEvents

Tipo

boolean

Descripción

If set to true, pointer events will be blocked.

children

Tipo

node

Descripción

Children; preferably 'GridItem' but works with any child.

className

Tipo

string

Descripción

CSS class name for this component.

columns

Tipo

string | number[]

Descripción

Defines explicit column widths.

gap

Tipo

'none' | 'small' | 'medium' | 'large'

Descripción

Gap size between the rows and columns.

Valor predeterminado

'medium'

hgap

Tipo

'none' | 'small' | 'medium' | 'large'

Descripción

Horizontal gap size between the columns. If unspecified, falls back to the gap property.

justifyContent

Tipo

'left' | 'center' | 'right' | 'around' | 'between' | 'evenly' | 'stretch'

Descripción

Justify logic for the grid within its container.

Valor predeterminado

'stretch'

justifyItems

Tipo

'left' | 'center' | 'right' | 'around' | 'between' | 'evenly' | 'stretch'

Descripción

Justify logic for all items within the grid.

Valor predeterminado

'stretch'

rows

Tipo

string | number[]

Descripción

Defines explicit row heights.

style

Tipo

React.CSSProperties | undefined

Descripción

DOM element styles.

tag

Tipo

string

Descripción

Optional DOM tag to render.

Valor predeterminado

'div'

valignItems

Tipo

'top' | 'middle' | 'bottom' | 'baseline' | 'stretch'

Descripción

Vertical alignment for all items within the grid.

Valor predeterminado

'stretch'

vgap

Tipo

'none' | 'small' | 'medium' | 'large'

Descripción

Vertical gap between the rows. If unspecified, falls back to the gap property.

alignContentobsoleto

Tipo

'start' | 'center' | 'end' | 'baseline' | 'stretch'

Descripción

Aligns rows vertically within the grid container.

Valor predeterminado

'stretch'

phoneobsoleto

Tipo

Grid

Descripción

Any Grid properties that will be used instead for the 'phone' breakpoint. Deprecated since 10.9.0.

phoneWideobsoleto

Tipo

Grid

Descripción

Any Grid properties that will be used instead for the 'phoneWide' breakpoint. Deprecated since 10.9.0.

repeatobsoleto

Tipo

'auto-fit' | 'auto-fill' | number | string

Descripción

Logic for how columns will be repeated.

tabletobsoleto

Tipo

Grid

Descripción

Any Grid properties that will be used instead for the 'tablet' breakpoint. Deprecated since 10.9.0.

valignContentobsoleto

Tipo

'top' | 'middle' | 'bottom' | 'baseline' | 'stretch'

Descripción

Aligns rows vertically within the grid container.

Valor predeterminado

'stretch'

GridItem

alignSelf

Tipo

'top' | 'middle' | 'bottom' | 'baseline' | 'stretch'

Descripción

Aligns the item horizontally within its container.

Valor predeterminado

'stretch'

colSpan

Tipo

number | string

Descripción

Specifies how many columns the element will span.

colStart

Tipo

number | string

Descripción

Specifies a grid item's start column position within the grid.

justifySelf

Tipo

'start' | 'center' | 'end' | 'stretch'

Descripción

Aligns the items vertically within their containers.

Valor predeterminado

'stretch'

rowSpan

Tipo

number | string

Descripción

Specifies how many rows the element will span.

rowStart

Tipo

number | string

Descripción

Specifies a grid item's start row position within the grid.

alignobsoleto

Tipo

'start' | 'center' | 'end' | 'stretch'

Descripción

Aligns the items vertically within their containers. Deprecated since 10.9.0, use justifySelf instead.

cloneobsoleto

Tipo

boolean

Descripción

Renders the child without a tag wrapper. It passes classNames and styles directly to the child element if possible. If not possible, it falls back to wrapping with a tag (for React elements which are not valid). Deprecated since 10.9.0.

fullWidthobsoleto

Tipo

boolean

Descripción

If set to true, item takes full width of the parent grid. Ignored if colStart or colSpan is specified. Deprecated since 10.9.0.

phoneobsoleto

Tipo

Grid

Descripción

Any Grid properties that will be used instead for the 'phone' breakpoint. Deprecated since 10.9.0.

phoneWideobsoleto

Tipo

Grid

Descripción

Any Grid properties that will be used instead for the 'phoneWide' breakpoint. Deprecated since 10.9.0.

tabletobsoleto

Tipo

Grid

Descripción

Any Grid properties that will be used instead for the 'tablet' breakpoint. Deprecated since 10.9.0.

textAlignobsoleto

Tipo

'top' | 'middle' | 'bottom' | 'baseline' | 'stretch'

Descripción

Aligns text inside item. Deprecated since 10.9.0.

valignobsoleto

Tipo

'top' | 'middle' | 'bottom' | 'baseline' | 'stretch'

Descripción

Aligns the item horizontally within its container. Deprecated since 10.9.0, use alignSelf instead.

visibleobsoleto

Tipo

boolean

Descripción

Specifies whether the GridItem is visible. Deprecated since 10.9.0.

Ganchos

No hay ganchos para Grid.

Claves de traducción

No hay traducciones para Grid.

Para obtener información sobre cómo gestionar las traducciones, consulte nuestra sección sobre internacionalización.

Escotillas de escape

Para obtener más información, consulte nuestra documentación sobre escotillas de escape.

Ejemplos

Ejemplo de contenedor de cuadrícula básico

Un contenedor de cuadrícula básico de Jutro consta de un componente Grid con varios componentes secundarios. Si estos componentes secundarios son componentes GridItem, puede utilizar las propiedades GridItem adicionales para tener un mayor control del elemento dentro de la composición y disposición.

El comportamiento predeterminado supondrá una columna y agregará cada nuevo elemento a una nueva fila.

import { Grid, GridItem } from '@jutro/layout';

<Grid>
  <GridItem>
    <strong>First Item</strong>
  </GridItem>
  <GridItem>
    <strong>Second Item</strong>
  </GridItem>
  <GridItem>
    <strong>Third Item</strong>
  </GridItem>
</Grid>;

Ejemplo de varias columnas

Para agregar columnas adicionales, defina los anchos de columna. De manera predeterminada, los elementos llenarán cada columna antes de pasar a la siguiente fila. En este ejemplo, se agregan tres elementos a una cuadrícula de dos columnas.

import { Grid, GridItem } from '@jutro/layout';

<Grid columns={['1fr', '1fr']}>
  <GridItem>
    <strong>First Item</strong>
  </GridItem>
  <GridItem>
    <strong>Second Item</strong>
  </GridItem>
  <GridItem>
    <strong>Third Item</strong>
  </GridItem>
</Grid>;

Ejemplo de autoRows

Puede utilizar la propiedad autoRows para determinar la altura de fila para las filas no definidas en el atributo rows. Esto le permite establecer la altura cuando la longitud de la cuadrícula puede ser desconocida. En este ejemplo, la primera fila tiene una altura de 50 píxeles y las adicionales tendrán una altura mayor, de 75 píxeles.

import { Grid, GridItem } from '@jutro/layout';

<Grid
  rows={['50px']}
  autoRows={['75px']}>
  <GridItem>
    <strong>First Item</strong>
  </GridItem>
  <GridItem>
    <strong>Second Item</strong>
  </GridItem>
  <GridItem>
    <strong>Third Item</strong>
  </GridItem>
</Grid>;

Ejemplos de cómo justificar

Puede utilizar la propiedad justifyContent para establecer el modo en que se alinean las columnas en la cuadrícula.

import { Grid, GridItem } from '@jutro/layout';

<Grid justifyContent="center">
  <GridItem>
    <strong>First Item</strong>
  </GridItem>
  <GridItem>
    <strong>Second Item</strong>
  </GridItem>
  <GridItem>
    <strong>Third Item</strong>
  </GridItem>
</Grid>;

La propiedad justifyItems se utiliza para establecer el modo en que se alinean los elementos en su contenedor.

import { Grid, GridItem } from '@jutro/layout';

<Grid justifyItems="center">
  <GridItem>
    <strong>First Item</strong>
  </GridItem>
  <GridItem>
    <strong>Second Item</strong>
  </GridItem>
  <GridItem>
    <strong>Third Item</strong>
  </GridItem>
</Grid>;

Para establecer el modo en que se alinean los elementos específicos en su contenedor, use la propiedad justifySelf en el GridItem apropiado.

import { Grid, GridItem } from '@jutro/layout';

<Grid>
  <GridItem justifySelf="stretch">
    <strong>justifySelf='stretch'</strong>
  </GridItem>
  <GridItem justifySelf="start">
    <strong>justifySelf='start'</strong>
  </GridItem>
  <GridItem justifySelf="center">
    <strong>justifySelf='center'</strong>
  </GridItem>
  <GridItem justifySelf="end">
    <strong>justifySelf='end'</strong>
  </GridItem>
</Grid>;

Ejemplos de alineación

Use la propiedad alignItems para establecer el modo en que se alinean verticalmente los elementos en su contenedor.

import { Grid, GridItem } from '@jutro/layout';

<Grid
  columns={['1fr', '1fr']}
  alignItems="center">
  <GridItem>
    <p>
      <strong>First Item</strong>
    </p>
    <p>&nbsp;</p>
  </GridItem>
  <GridItem>
    <strong>Second Item</strong>
  </GridItem>
</Grid>;

Para establecer el modo en que se alinean verticalmente los elementos específicos en su contenedor, use la propiedad alignSelf en el GridItem apropiado.

import { Grid, GridItem } from '@jutro/layout';

<Grid columns={['1fr', '1fr', '1fr', '1fr', '1fr']}>
  <GridItem>
    <p>
      <strong>alignSelf='stretch'</strong>
    </p>
    <p>&nbsp;</p>
  </GridItem>
  <GridItem alignSelf="center">
    <strong>alignSelf='center'</strong>
  </GridItem>
  <GridItem alignSelf="start">
    <strong>alignSelf='start'</strong>
  </GridItem>
  <GridItem alignSelf="end">
    <strong>alignSelf='end'</strong>
  </GridItem>
  <GridItem alignSelf="baseline">
    <strong>alignSelf='baseline'</strong>
  </GridItem>
</Grid>;

Ejemplo de colSpan

La propiedad colSpan en un GridItem establece cuántas columnas abarcará el elemento.

import { Grid, GridItem } from '@jutro/layout';

<Grid
  columns={['1fr', '1fr', '1fr']}
  rows={['1fr', '1fr']}
  gap="large">
  <GridItem colSpan="3">
    <strong>First Item</strong>
  </GridItem>
  <GridItem>
    <strong>Second Item</strong>
  </GridItem>
  <GridItem colSpan="2">
    <strong>Third Item</strong>
  </GridItem>
</Grid>;

Ejemplo de rowSpan

La propiedad rowSpan en un GridItem establece cuántas filas abarcará el elemento.

import { Grid, GridItem } from `@jutro/layout`;

<Grid columns={['1fr', '1fr']} rows={['1fr', '1fr']} gap="large">
  <GridItem rowSpan="2" >
    <strong>First Item</strong>
  </GridItem>
  <GridItem >
    <strong>Second Item</strong>
  </GridItem>
  <GridItem >
    <strong>Third Item</strong>
  </GridItem>
</Grid>

Ejemplos de colStart y rowStart

Las propiedades colStart y rowStart en un GridItem establecen la columna y la fila, respectivamente, en las que comienza el elemento. En combinación con colSpan y rowSpan, estas propiedades se pueden utilizar para un alto nivel de granularidad de personalización de la disposición y composición de cuadrícula.

import { Grid, GridItem } from `@jutro/layout`;

<Grid
  columns={['1fr', '1fr', '1fr']}
  rows={['1fr', '1fr', '1fr']}
  gap="large"
>
  <GridItem colSpan={2}>
    <strong>First Item</strong>
  </GridItem>
  <GridItem rowSpan={2} colStart={1}>
    <strong>Second Item</strong>
  </GridItem>
  <GridItem>
    <strong>Third Item</strong>
  </GridItem>
  <GridItem rowSpan={2} rowStart={1} colStart={3}>
    <strong>Fourth Item</strong>
  </GridItem>
  <GridItem colSpan={2}>
    <strong>Fifth Item</strong>
  </GridItem>
</Grid>

Registro de cambios

10.9.0

Las siguientes propiedades quedaron obsoletas en 10.9.0.

Componente	Propiedad	Alternativa
Cuadrícula	phone	Ninguno
Cuadrícula	phoneWide	Ninguno
Cuadrícula	tablet	Ninguno
Cuadrícula	repeat	Ninguno
GridItem	phone	Ninguno
GridItem	phoneWide	Ninguno
GridItem	tablet	Ninguno
GridItem	clone	Ninguno
GridItem	fullWidth	Ninguno
GridItem	visible	Ninguno
GridItem	textAlign	Ninguno
GridItem	vAlign	alignSelf
GridItem	align	justifySelf