Grid

O componente Grid é usado para criar grades no layout, como dividir o layout da tela em 2 colunas. O Grid espera como children Grid.Item, o qual também rederiza um elemento div.

Importação

import { Grid } from '@escaletech/delta'

Utilização

Editor de código

<Grid> <Grid.Item> <div style={{ background: 'aquamarine', height: 30, width: '100%' }}></div> </Grid.Item> <Grid.Item> <div style={{ background: 'pink', height: 30, width: '100%' }}></div> </Grid.Item> </Grid>

<Grid>
  <Grid.Item>
    <div style={{ background: 'aquamarine', height: 30, width: '100%' }}></div>
  </Grid.Item>
  <Grid.Item>
    <div style={{ background: 'pink', height: 30, width: '100%' }}></div>
  </Grid.Item>
</Grid>

Resultado

Loading...

Breakpoints

Use a propriedade colSpans para alterar o tamanho da coluna. Esta propriedade espera um objeto com os seguintes breakpoints:

Breakpoints	Valor	Colunas
xs	<600px	4
sm	≥600px	12
md	≥900px	12
lg	≥1200px	12

Se você não definir valores de colSpans (e também não definir valores de colStarts e colEnds), a coluna ocupará o tamanho todo limitado a ela.

Editor de código

<> <Grid> <Grid.Item colSpans={{ xs: 4, sm: 12, md: 12, lg: 12 }} css={{ background: 'aquamarine', textAlign: 'center', color: '#3f3f3f' }} > xs: 4 / sm: 12 / md: 12 / lg: 12 </Grid.Item> <Grid.Item colSpans={{ xs: 1, sm: 3 }} css={{ background: 'pink', textAlign: 'center', color: '#3f3f3f' }} > xs: 1 / sm: 3 / md: 3 / lg: 3 </Grid.Item> <Grid.Item colSpans={{ xs: 3, sm: 9 }} css={{ background: 'skyblue', textAlign: 'center', color: '#3f3f3f' }} > xs: 3 / sm: 9 / md: 9 / lg: 9 </Grid.Item> </Grid> </>

<>
  <Grid>
    <Grid.Item
      colSpans={{ xs: 4, sm: 12, md: 12, lg: 12 }}
      css={{
        background: 'aquamarine',
        textAlign: 'center',
        color: '#3f3f3f'
      }}
    >
      xs: 4 / sm: 12 / md: 12 / lg: 12
    </Grid.Item>
    <Grid.Item
      colSpans={{ xs: 1, sm: 3 }}
      css={{
        background: 'pink',
        textAlign: 'center',
        color: '#3f3f3f'
      }}
    >
      xs: 1 / sm: 3 / md: 3 / lg: 3
    </Grid.Item>
    <Grid.Item
      colSpans={{ xs: 3, sm: 9 }}
      css={{
        background: 'skyblue',
        textAlign: 'center',
        color: '#3f3f3f'
      }}
    >
      xs: 3 / sm: 9 / md: 9 / lg: 9
    </Grid.Item>
  </Grid>
</>

Resultado

Loading...

Você também pode passar a propriedade autoFit para que as colunas fiquem distribuídas igualmente no grid.

Editor de código

<Grid autoFit> <Grid.Item css={{ background: 'aquamarine', height: 30 }} /> <Grid.Item css={{ background: 'aquamarine', height: 30 }} /> <Grid.Item css={{ background: 'aquamarine', height: 30 }} /> </Grid>

  <Grid autoFit>
    <Grid.Item
      css={{
        background: 'aquamarine',
        height: 30
      }}
    />
    <Grid.Item
      css={{
        background: 'aquamarine',
        height: 30
      }}
    />
    <Grid.Item
      css={{
        background: 'aquamarine',
        height: 30
      }}
    />
  </Grid>

Resultado

Loading...

Offset

Você pode pular as colunas utilizando as propriedades colStarts e colEnds. Na propriedade colStarts é definido a coluna que deve começar e a propriedade colEnds é definido a coluna que deve terminar, seguindo os mesmos atributos do colSpans:

Editor de código

<Grid> <Grid.Item colSpans={{ xs: 1, md: 4 }} css={{ background: 'aquamarine', height: 30 }} /> <Grid.Item colStarts={{ xs: 4, md: 9 }} colEnds={{ xs: 5, md: 13 }} css={{ background: 'pink', height: 30 }} /> </Grid>

<Grid>
  <Grid.Item
    colSpans={{ xs: 1, md: 4 }}
    css={{
      background: 'aquamarine',
      height: 30
    }}
  />
  <Grid.Item
    colStarts={{ xs: 4, md: 9 }}
    colEnds={{ xs: 5, md: 13 }}
    css={{
      background: 'pink',
      height: 30
    }}
  />
</Grid>

Resultado

Loading...

Grid dentro de Grid

Você também consegue usar uma Grid dentro de outra.

Editor de código

<Grid> <Grid.Item colSpans={{ md: 6 }}> <Grid> <Grid.Item colSpans={{ xs: 2, md: 6 }} css={{ background: 'aquamarine', color: '#3f3f3f', height: 30 }} > 1.1 </Grid.Item> <Grid.Item colSpans={{ xs: 2, md: 6 }} css={{ background: 'aquamarine', color: '#3f3f3f', height: 30 }} > 1.1 </Grid.Item> <Grid.Item colSpans={{ xs: 2, md: 6 }} css={{ background: 'aquamarine', color: '#3f3f3f', height: 30 }} > 1.1 </Grid.Item> <Grid.Item colSpans={{ xs: 2, md: 6 }} css={{ background: 'aquamarine', color: '#3f3f3f', height: 30 }} > 1.1 </Grid.Item> </Grid> </Grid.Item> <Grid.Item colSpans={{ md: 6 }} css={{ background: 'aquamarine', color: '#3f3f3f', height: 30 }} /> </Grid>

<Grid>
  <Grid.Item colSpans={{ md: 6 }}>
    <Grid>
      <Grid.Item
        colSpans={{ xs: 2, md: 6 }}
        css={{
          background: 'aquamarine',
          color: '#3f3f3f',
          height: 30
        }}
      >
        1.1
      </Grid.Item>
      <Grid.Item
        colSpans={{ xs: 2, md: 6 }}
        css={{
          background: 'aquamarine',
          color: '#3f3f3f',
          height: 30
        }}
      >
        1.1
      </Grid.Item>
      <Grid.Item
        colSpans={{ xs: 2, md: 6 }}
        css={{
          background: 'aquamarine',
          color: '#3f3f3f',
          height: 30
        }}
      >
        1.1
      </Grid.Item>
      <Grid.Item
        colSpans={{ xs: 2, md: 6 }}
        css={{
          background: 'aquamarine',
          color: '#3f3f3f',
          height: 30
        }}
      >
        1.1
      </Grid.Item>
    </Grid>
  </Grid.Item>

  <Grid.Item
    colSpans={{ md: 6 }}
    css={{
      background: 'aquamarine',
      color: '#3f3f3f',
      height: 30
    }}
  />
</Grid>

Resultado

Loading...

Espaço entre as grids

Para alterar o tamanho do gap entre as colunas, basta atribuir um valor a propriedade gap do Grid. Esta prop aceita qualquer unidade de medida de CSS e variáveis de 'space'.

Editor de código

<Grid autoFit gap='50px'> <Grid.Item css={{ background: 'aquamarine', height: 30 }} /> <Grid.Item css={{ background: 'aquamarine', height: 30 }} /> </Grid>

<Grid autoFit gap='50px'>
  <Grid.Item
    css={{
      background: 'aquamarine',
      height: 30
    }}
  />
  <Grid.Item
    css={{
      background: 'aquamarine',
      height: 30
    }}
  />
</Grid>

Resultado

Loading...

Alinhamento de conteúdo

É possível alinhar o conteúdo do Grid.Item tanto na vertical como na horizontal, atribuindo valor às props align e justify, respectivamente.

Editor de código

<Grid> <Grid.Item colSpans={{ xs: 2, md: 6 }} css={{ background: 'aquamarine', height: 30 }} /> <Grid.Item colSpans={{ xs: 2, md: 6 }} justify='center' align='end' css={{ background: 'aquamarine', height: 30 }} /> </Grid>

<Grid>
  <Grid.Item
    colSpans={{ xs: 2, md: 6 }}
    css={{
      background: 'aquamarine',
      height: 30
    }}
  />
  <Grid.Item
    colSpans={{ xs: 2, md: 6 }}
    justify='center'
    align='end'
    css={{
      background: 'aquamarine',
      height: 30
    }}
  />
</Grid>

Resultado

Loading...

Customização

Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na página de documentação de tema.

import { extendsTheme } from '@escaletech/delta'

export const theme = extendsTheme({
  space: {
    gridGutter: '24px'
  },
  sizes: {
    gridGutter: '24px'
  }
})

Tokens

Token	Descrição
space.gridGutter	Tamanho do espaço entre grids
sizes.gridGutter	Tamanho do espaço entre grids

Props

Grid

Propriedade	Descrição	Tipo	Padrão	Obrigatório
children	Conteúdo do componente	ReactNode	_	✅
gap	Tamanho do gap entre as colunas	string	$gridGutter	❌
autoFit	Se for true, as colunas se distribuirão igualmente na tela.	boolean	false	❌

Grid.Item

Propriedade	Descrição	Tipo	Padrão	Obrigatório
children	Conteúdo do componente	React.ReactNode	-	✅
colSpans	Tamanho das colunas. No xs são 4 colunas e nos demais breakpoints são 12 colunas.	{ xs: number, sm: number, md: number, lg: number }	{ xs: 4, sm: 12, md: 12, lg: 12 }	❌
colStarts	Coluna que irá começar o conteúdo. No xs são 4 colunas e nos demais breakpoints são 12 colunas.	{ sm: number, sm: number, md: number, lg: number }	{ xs: 1, sm: 1, md: 1, lg: 1 }	❌
colEnds	Coluna que vai terminar o conteúdo. No xs são 4 colunas e nos demais breakpoints são 12 colunas.	{ sm: number, sm: number, md: number, lg: number }	{ xs 5, sm: 13, md: 13, lg: 13 }	❌
justify	Alinhamento horizontal do conteúdo	start, center, end, between	-	❌
align	Alinhamento vertical do conteúdo	start, center, end, stretch, baseline	-	❌