Cuida

Grids ​

Gris são componentes que usam a API das grids CSS para prover estruturas de organização consistentes.


Quando usar ​

  • Para criar layouts responsivos e consistentes em toda a aplicação.
  • Para alinhar elementos em linhas e colunas de forma uniforme.
  • Na construção de Dashboards, Bento Grids, Galerias, etc.
  • Em estruturas nas quais for necessário especificar a estrutura dos elementos de forma bidimensional, tanto em linhas quanto em colunas;

Quando não usar ​

  • Quando o design requer posicionamento absoluto ou fixo de elementos;
  • Em componentes pequenos e auto-contidos que não necessitam de um sistema de grid;
  • Em situações nas quais for necessário alinhar elementos apenas em uma das dimensões e não nas duas ao mesmo tempo. Para esses casos, utilize FlexBox.

Observações ​

  • O <CdsGrid> funciona em conjunto com o componente <CdsGridItem>. Por questões de simplicidade a documentação dos dois componentes está representada nessa página.
  • O componente <CdsGridItem> não tem aplicabilidade prática sem o <CdsGrid>, são componentes dependentes.
  • ⚠️ Apesar de essa página explicar o uso de cada propriedade da API do <CdsGridItem>, acesse a página do componente caso queira obter a lista completa de props.


Como usar ​

Colunas ​

A prop cols abstrai a propriedade grid-template-columns permitindo definir a configuração de colunas do layout grid diretamente no componente. São aceitos qualquer valor válido para grid-template-columns no CSS, passado como uma String. Caso nenhum valor seja fornecido para a prop cols, o valor padrão será "1fr", o que significa que a grid terá uma única coluna que ocupa todo o espaço disponível de forma proporcional.


Valores Aceitos ​

A prop cols aceita os seguintes tipos de valor:

  • String: Qualquer valor CSS válido para grid-template-columns pode ser fornecido como uma string.
  • Number: Se um número for passado, ele será automaticamente convertido para uma string representando o fracionamento da grid. Por exemplo: 3 será interpretado como "1fr 1fr 1fr", criando 3 colunas de tamanho igual.
  • Array: Também é possível passar um array contendo strings, onde cada elemento representará uma coluna. Por exemplo: ['200px', '6rem', '50%'].

1fr
1fr
1fr
html
<CdsGrid
	:cols="3"
	gap="20px"
	class="grid-background"
>
	<CdsGridItem>
		<div class="docs-grid-cell">1fr</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">1fr</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">1fr</div>
	</CdsGridItem>
</CdsGrid>

minmax(auto, 50%)
1fr
minmax(100px, 300px)
html
<CdsGrid
	cols="minmax(auto, 50%) 1fr minmax(100px, 300px)"
	gap="20px"
	class="grid-background"
>
	<CdsGridItem>
		<div class="docs-grid-cell">minmax(auto, 50%)</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">1fr</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">minmax(100px, 300px)</div>
	</CdsGridItem>
</CdsGrid>

200px
6rem
50%
html
<CdsGrid
	:cols="['200px', '6rem', '50%']"
	gap="20px"
	class="grid-background"
>
	<CdsGridItem>
		<div class="docs-grid-cell">200px</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">6rem</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">50%</div>
	</CdsGridItem>
</CdsGrid>

Mesclagem de Colunas ​

A prop col-span abstrai a propriedade grid-column e permite indicar quantas colunas da grid o componente <CdsGridItem> (e seus filhos) irá ocupar.

Comportamento padrão ​

Se a propriedade col-start não for definida, especificar um col-span de, por exemplo, 3, será equivalente a definir grid-column: auto / span 3, fazendo o item ocupar três colunas começando da posição padrão (automática) na grid.

Valores Aceitos ​

A prop col-span aceita Numbers e Strings Se a propriedade col-start não for definida, atribuir um col-span de, por exemplo, 3, será equivalente a definir grid-column: auto / span 3, fazendo o item ocupar três colunas começando da posição padrão (automática) na grid.

col-span="1"
col-span="2"
col-span="3"
html
<CdsGrid
	:cols="6"
	gap="20px"
	class="grid-background"
>
	<CdsGridItem colSpan="1">
		<div class="docs-grid-cell">col-span="1"</div>
	</CdsGridItem>
	<CdsGridItem :colSpan="3">
		<div class="docs-grid-cell">col-span="2"</div>
	</CdsGridItem>
	<CdsGridItem colSpan="2">
		<div class="docs-grid-cell">col-span="3"</div>
	</CdsGridItem>
</CdsGrid>

Posição inicial das colunas ​

A prop col-start abstrai a propriedade CSS grid-column-start e permite definir em qual coluna a renderização do componente <CdsGridItem> (e seus elementos filhos) irá começar.

Comportamento padrão ​

Se col-start não for definida, seu valor padrão é "auto", permitindo que o navegador decida a posição inicial do item na grid.

Valores Aceitos ​

A prop col-start aceita Numbers e Strings Se a propriedade col-span não for definida, especificar um col-span de, por exemplo, 3, será equivalente a definir grid-column: 3 / span 1, fazendo o item ocupar uma coluna começando na terceira posição da Grid.

col-start="3"
col-start="5"
col-start="4"
html
<CdsGrid
	:cols="6"
	gap="20px"
	class="grid-background"
>
	<CdsGridItem colStart="3">
		<div class="docs-grid-cell">col-start="3"</div>
	</CdsGridItem>
	<CdsGridItem colStart="5">
		<div class="docs-grid-cell">col-start="5"</div>
	</CdsGridItem>
	<CdsGridItem colSpan="2" colStart="4">
		<div class="docs-grid-cell">col-start="4"</div>
	</CdsGridItem>
</CdsGrid>

Linhas ​

A prop rows abstrai a propriedade grid-template-rows, permitindo definir a configuração de linhas do layout grid diretamente no componente. São aceitos qualquer valor válido para grid-template-rows no CSS, passado como uma String. Caso nenhum valor seja fornecido para a prop rows, o valor padrão será "auto", o que significa que cada linha terá uma altura automática, baseada no conteúdo.

Comportamento padrão ​

Se grid-template-rows não for definida, seu valor padrão é 1fr.

Valores Aceitos ​

A prop cols aceita os seguintes tipos de valor:

  • String: Qualquer valor CSS válido para grid-template-rows pode ser fornecido como uma string. Exemplos: "100px 200px auto", "repeat(3, 1fr)", "minmax(100px, auto)";
  • Number: Se um número for passado, ele será automaticamente convertido para uma string representando o fracionamento da grid. Por exemplo: 2 será interpretado como "1fr 1fr", criando 2 linhas de tamanho igual.
  • Array: Também é possível passar um array contendo strings, onde cada elemento representará uma linha. Por exemplo: ['32px', '3.2rem', '40%'].
32px
3.2rem
40%
html
<CdsGrid
	:cols="1"
	:rows="['32px', '3.2rem', '40%']"
	gap="4px"
	class="grid-background"
>
	<CdsGridItem>
		<div class="docs-grid-cell">32px</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">3.2rem</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">40%</div>
	</CdsGridItem>
</CdsGrid>

Tamanho das linhas automáticas ​

A prop auto-rows abstrai a propriedade CSS grid-auto-rows e permite definir a altura das linhas criadas automaticamente pelo layout grid. Por exemplo, se o conteúdo da propriedade rows for definido como "50px 50px" e auto-rows for definido como "120px" as duas linhas da grid terão 50px de altura, enquanto qualquer linha adicional terá 120px.

Comportamento padrão ​

Se auto-rows não for definida, seu valor padrão é "1fr",

Valores Aceitos ​

A prop cols aceita os seguintes tipos de valor:

  • String: Qualquer valor CSS válido para grid-auto-rows pode ser fornecido como uma string. Exemplos: "100px 200px auto", "repeat(3, 1fr)", "minmax(100px, auto)";
  • Number: Se um número for passado, ele será automaticamente convertido para uma string representando o fracionamento da grid. Por exemplo: 2 será interpretado como "2fr".
50px
50px
120px
120px
html
<CdsGrid
	rows="50px 50px"
	autoRows="120px"
	gap="20px"
	class="grid-background"
>
	<CdsGridItem>
		<div class="docs-grid-cell">50px</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">50px</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">120px</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">120px</div>
	</CdsGridItem>
</CdsGrid>

Mesclagem de Linhas ​

De modo equivalente à col-span, mas para linhas, a prop row-span abstrai a propriedade CSS grid-row permitindo indicar quantas linhas da grid o componente <CdsGridItem> (e seus filhos) irá ocupar.

Comportamento padrão ​

Se a propriedade row-start não for definida, especificar um row-span de, por exemplo, 3, será equivalente a definir grid-row: auto / span 3, fazendo o item ocupar três linhas começando da posição padrão (automática) na grid.

Valores Aceitos ​

A prop cols aceita os seguintes tipos de valor:

  • String: Qualquer valor CSS válido para grid-auto-rows pode ser fornecido como uma string. Exemplos: "100px 200px auto", "repeat(3, 1fr)", "minmax(100px, auto)";
  • Number: Se um número for passado, ele será automaticamente convertido para uma string representando o fracionamento da grid. Por exemplo: 2 será interpretado como "2fr".
row-span="2"
--
--
html
<CdsGrid
	:cols="3"
	:rows="2"
	gap="20px"
	class="grid-background"
>
	<CdsGridItem rowSpan="2">
		<div class="docs-grid-cell">row-span="2"</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">--</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">--</div>
	</CdsGridItem>
</CdsGrid>

Posição inicial das linhas ​

A prop row-start abstrai a propriedade CSS grid-row-start e permite definir em qual linha a renderização do componente <CdsGridItem> (e seus elementos filhos) irá começar.

Comportamento padrão ​

Se row-start não for definida, seu valor padrão é "auto", permitindo que o navegador decida a posição inicial do item na grid.

Valores Aceitos ​

A prop row-start aceita Numbers e Strings Se a propriedade row-span não for definida, especificar um row-span de, por exemplo, 3, será equivalente a definir grid-row: 3 / span 1, fazendo o item ocupar um espaço na terceira linha da Grid.

row-start="2"
row-start="3"
row-start="6"
html
<CdsGrid
	:rows="6"
	gap="20px"
	class="grid-background"
>
	<CdsGridItem rowStart="2">
		<div class="docs-grid-cell">row-start="2"</div>
	</CdsGridItem>
	<CdsGridItem rowStart="3">
		<div class="docs-grid-cell">row-start="3"</div>
	</CdsGridItem>
	<CdsGridItem rowStart="6">
		<div class="docs-grid-cell">row-start="6"</div>
	</CdsGridItem>
</CdsGrid>

Gap ​

O espaçamento entre os elementos do <CdsGrid> pode ser definido através das props gap. O número ou expressão passados para a prop determinam um espaçamento homogêneo na grid, sendo o mesmo valor aplicado tanto horizontal quanto verticalmente.

Comportamento padrão ​

O valor default da propriedade é 0, valor que deixa todos os elementos juntos, sem espaçamento horizontal ou vertical.

Valores Aceitos ​

A prop gap aceita os seguintes tipos de valor:

  • String: Qualquer valor CSS válido para gap pode ser fornecido como uma string. Exemplos: "100px", "4%", "5rem"; ⚠️ Importante: se nenhuma unidade for fornecida, a string informada se comportará como número e terá seu valor multiplicado por 4, com adição da unidade "px". Ex.: para gap="3" o espaçamento adotado será de "12px".
  • Number: Se um número for passado, ele será multiplicado por 4 para se adequar ao padrão de espaçamento adotado no Cuida e em seguida será convertido para pixels. Ex.: para :gap="2" o espaçamento adotado será de "8px".
01
02
03
04
html
<CdsGrid
	:cols="2"
	gap="2"
	class="grid-background"
>
	<CdsGridItem>
		<div class="docs-grid-cell">01</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">02</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">03</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">04</div>
	</CdsGridItem>
</CdsGrid>
`

RowGap e ColGap ​

Caso precise especificar um espaçamento horizontal diferente do vertical, ou indicar apenas um deles, é possível usar as props row-gap e col-gap. row-gap modifica o espaçamento entre as linhas da grid, enquanto col-gap modifica o espaçamento entre as colunas.

Comportamento padrão ​

O valor default de ambas as propriedades é 0, valor que deixa todos os elementos juntos, sem espaçamento horizontal ou vertical.

Valores Aceitos ​

Assim como a prop gap, row-gap quanto col-gap aceitam Numbers e Strings e funcionam do mesmo modo:

  • String: Qualquer valor CSS válido pode ser fornecido para as props como uma string. Exemplos: "100px", "4%", "5rem"; ⚠️ Importante: se nenhuma unidade for fornecida, a string informada se comportará como número e terá seu valor multiplicado por 4, com adição da unidade "px". Ex.: para row-gap="3" o espaçamento entre linhas será de "12px". O mesmo vale para col-gap;
  • Number: Se um número for passado, ele será multiplicado por 4 para se adequar ao padrão de espaçamento adotado no Cuida e em seguida será convertido para pixels. Ex.: para :col-gap="2" o espaçamento entre colunas será de "8px". O mesmo vale para row-gap;
01
02
03
04
html
<CdsGrid
	:cols="2"
	rowGap="30px"
	colGap="120px"
	class="grid-background"
>
	<CdsGridItem>
		<div class="docs-grid-cell">01</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">02</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">03</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">04</div>
	</CdsGridItem>
</CdsGrid>
`

Alihamento Horizontal ​

A prop justify controla o alinhamento horizontal dos itens dentro do <CdsGrid>, abstraindo a propriedade justify-content do CSS Grid.

Comportamento padrão ​

O valor default da propriedade é "stretch", o que faz com que os itens dentro da grid ocupem toda a largura disponível no container.

Valores Aceitos ​

Qualquer valor CSS válido que controle o alinhamento horizontal no grid pode ser fornecido como uma string para personalizar o layout conforme necessário, como por exemplo space-between, start, center e end.

01
02
03
html
<CdsGrid
	cols="100px 100px 100px"
	gap="20px"
	class="grid-background"
	justify="space-between"
>
	<CdsGridItem>
		<div class="docs-grid-cell">01</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">02</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">03</div>
	</CdsGridItem>
</CdsGrid>
`
01
02
03
html
<CdsGrid
	cols="100px 100px 100px"
	gap="20px"
	class="grid-background"
	justify="center"
>
	<CdsGridItem>
		<div class="docs-grid-cell">01</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">02</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">03</div>
	</CdsGridItem>
</CdsGrid>
`
01
02
03
html
<CdsGrid
	cols="100px 100px 100px"
	gap="20px"
	class="grid-background"
	justify="end"
>
	<CdsGridItem>
		<div class="docs-grid-cell">01</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">02</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">03</div>
	</CdsGridItem>
</CdsGrid>
`

Alinhamento Vertical ​

A prop align controla o alinhamento vertical dos itens dentro do <CdsGrid>, abstraindo a propriedade align-items do CSS Grid.

Comportamento padrão ​

O valor default da propriedade é "stretch", o que faz com que os itens dentro da grid ocupem toda a altura disponível no container.

Valores Aceitos ​

Qualquer valor CSS válido que controle o alinhamento vertical no grid pode ser fornecido como uma string para personalizar o layout conforme necessário, como por exemplo start, center e end.

01
02
03
html
<CdsGrid
	cols="100px 100px 100px"
	rows="100px"
	gap="20px"
	class="grid-background"
	align="start"
>
	<CdsGridItem>
		<div class="docs-grid-cell">01</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">02</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">03</div>
	</CdsGridItem>
</CdsGrid>
`
01
02
03
html
<CdsGrid
	cols="100px 100px 100px"
	rows="100px"
	gap="20px"
	class="grid-background"
	align="center"
>
	<CdsGridItem>
		<div class="docs-grid-cell">01</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">02</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">03</div>
	</CdsGridItem>
</CdsGrid>
`
01
02
03
html
<CdsGrid
	cols="100px 100px 100px"
	rows="100px"
	gap="20px"
	class="grid-background"
	align="end"
>
	<CdsGridItem>
		<div class="docs-grid-cell">01</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">02</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">03</div>
	</CdsGridItem>
</CdsGrid>
`

Alinhamento Horizontal do Grid Item ​

A prop justify no <CdsGridItem> controla o alinhamento horizontal individual de um item dentro de uma célula do grid, abstraindo a propriedade CSS justify-self.

Comportamento padrão ​

O valor default da propriedade é "auto", o que faz com que o item siga o comportamento de alinhamento definido pelo justify-content do container, a menos que um valor diferente seja especificado.

Ao definir a prop justify em um <CdsGridItem>, o alinhamento do item individual é ajustado conforme o valor fornecido, sobrescrevendo o alinhamento horizontal definido pelo justify-content do container. Isso permite que o item tenha um comportamento de alinhamento independente dos outros itens no grid.

Valores Aceitos ​

Qualquer valor CSS válido para justify-self pode ser utilizado para personalizar o alinhamento horizontal de itens individualmente dentro do grid, como por exemplo os valores start, center, end e stretch.

justify="start"
justify="center"
justify="end"
justify="stretch"
html
<CdsGrid
	cols="200px"
	gap="20px"
	class="grid-background"
>
	<CdsGridItem justify="start">
		<div class="docs-grid-cell">justify="start"</div>
	</CdsGridItem>
	<CdsGridItem  justify="center">
		<div class="docs-grid-cell">justify="center"</div>
	</CdsGridItem>
	<CdsGridItem  justify="end">
		<div class="docs-grid-cell">justify="end"</div>
	</CdsGridItem>
	<CdsGridItem justify="stretch">
		<div class="docs-grid-cell">justify="stretch"</div>
	</CdsGridItem>
</CdsGrid>
`

Alinhamento Vertical do Grid Item ​

A prop align no <CdsGridItem> controla o alinhamento vertical individual de um item dentro de uma célula do grid, abstraindo a propriedade CSS align-self.

Comportamento padrão ​

O valor default da propriedade é "auto", o que faz com que o item siga o comportamento de alinhamento definido pelo align-items do container, a menos que um valor diferente seja especificado.

Ao definir a prop align em um <CdsGridItem>, o alinhamento do item individual é ajustado conforme o valor fornecido, sobrescrevendo o alinhamento vertical definido pelo align-items do container. Isso permite que o item tenha um comportamento de alinhamento vertical independente dos outros itens no grid.

Valores Aceitos ​

Qualquer valor CSS válido para align-self pode ser utilizado para personalizar o alinhamento vertical de itens individualmente dentro do grid, como por exemplo os valores start, center, end e stretch.

align="start"
align="center"
align="end"
align="stretch"
html
<CdsGrid
	cols="200px 200px 200px 200px"
	rows="200px"
	gap="20px"
	class="grid-background"
>
	<CdsGridItem align="start">
		<div class="docs-grid-cell">align="start"</div>
	</CdsGridItem>
	<CdsGridItem  align="center">
		<div class="docs-grid-cell">align="center"</div>
	</CdsGridItem>
	<CdsGridItem  align="end">
		<div class="docs-grid-cell">align="end"</div>
	</CdsGridItem>
	<CdsGridItem align="stretch">
		<div class="docs-grid-cell">align="stretch"</div>
	</CdsGridItem>
</CdsGrid>
`

SubGrid ​

A prop subgrid no <CdsGridItem> permite transformar um item em um grid, possibilitando a construção de layouts mais complexos, com grids aninhadas.

Comportamento padrão ​

O valor default da propriedade é false, o que significa que o <CdsGridItem> se comporta como um item normal dentro de um grid, sem definir um novo grid interno.

Quando a prop subgrid é definida como true, o display do CSS é alterado para grid, permitindo que o item contenha seus próprios itens de grid.

Valores Aceitos ​

A prop subgrid é uma propriedade booleana que aceita os seguintes valores:

  • true: ativa o modo subgrid, permitindo a definição de um layout interno.
  • false (padrão): O item se comporta como um item de grid normal, sem criar um novo grid interno.
Direção do Subgrid ​

Quando um <CdsGridItem> está se comportando como subgrid, é possível conrolar a organização padrão dos elementos com a prop direction. Essa prop implementa a propriedade CSS grid-auto-flow.

Comportamento padrão ​

O valor default da propriedade é "row", o que faz com que os itens dentro do subgrid sejam organizados em linhas.

Valores Aceitos ​

A prop direction aceita os seguintes valores:

  • row (padrão): os itens são organizados em linhas, ocupando a largura do container antes de avançar para a próxima linha.
  • column: os itens são organizados em colunas, ocupando a altura do container antes de avançar para a próxima coluna.
I
II
III
A
B
01
html
<CdsGrid
	cols="250px 250px 250px"
	rows="100px"
	gap="20px"
	class="grid-background"
	justify="space-between"
>
	<CdsGridItem subGrid direction="column">
		<div class="docs-grid-cell">I</div>
		<div class="docs-grid-cell">II</div>
		<div class="docs-grid-cell">III</div>
	</CdsGridItem>
	<CdsGridItem subGrid>
		<div class="docs-grid-cell">A</div>
		<div class="docs-grid-cell">B</div>
	</CdsGridItem>
	<CdsGridItem>
		<div class="docs-grid-cell">01</div>
	</CdsGridItem>
</CdsGrid>
`

Tag renderizada ​

A prop tag permite definir a tag que o componente renderiza. Essa propriedade é utilizada para permitir que o componente seja utilizado em diferentes contextos, como por exemplo, em um footer ou em um header.

Comportamento padrão ​

O valor default da propriedade é div, o que significa que o componente renderiza uma div.

Valores Aceitos ​

A prop tag é uma propriedade string que aceita os seguintes valores:

  • div (padrão): renderiza uma div.
  • span: renderiza uma span.
  • main: renderiza um main.
  • footer: renderiza um footer.
  • form: renderiza um form.
  • header: renderiza um header.
  • aside: renderiza um aside.
  • ul: renderiza uma ul.
  • li: renderiza uma li.

Última atualização:

Released under the Apache-2.0 License.

Copyright © 2020-present Sysvale