as

string

• article

• aside

• div (default)

• header

• footer

• main

• nav

• section

Tags HTML Semânticas

gap

GridGap

• none (default)

• responsive

• GapValues

• { [key in LayoutTokens]?: GapValues }

Distância aplicada entre os elementos (Item) do Grid. Especifica uma distância para vertical e uma outra para a horizontal.

GridGapValues

• SpacingTokens
• { vertical? : SpacingTokens; horizontal? : SpacingTokens; };

SpacingTokens

• base
• base02
• base03
• base04
• base05
• base06
• base07
• base08
• base09
• base10
• base12
• base15

LayoutTokens

• xs
• sm
• md
• lg
• xl
• xxl

alignItems

string

• start

• center

• end

• none

Alinhamento vertical interno do GridItem

justifyItems

string

• start

• center

• end

• none (default)

Alinhamento horizontal interno do GridItem

children

ReactNode

• —

Conteúdo interno.

debug

boolean

• true

• false (default)

Demarca o contorno do Grid para facilitar na identificação

as

string

• article

• aside

• div (default)

• header

• footer

• main

• nav

• section

Tags HTML Semânticas

size

number

• 1

• 2

• 3

• 4

• 5

• 6

• 7

• 8

• 9

• 10

• 11

• 12

Quantidade de colunas que o item ocupa (com base em 12 colunas totais).

align

string

• start (default)

• center

• end

Alinhamento vertical interno do próprio GridItem

justify

string

• start (default)

• center

• end

Alinhamento horizontal interno do próprio GridItem

children

ReactNode

• —

Conteúdo interno.

xs

GridItemBreakpointObjectConfig | number

• 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12

• { size?: number, align?: string, justify?: string}

Quando o viewport for maior ou igual a xs (0px), o valor passado é aplicado:

• Com os números, é definido a quantidade de colunas que o item ocupa (considerando uma base de 12 colunas).

• Se o valor numérico for 0, o item é ocultado.

• Se o valor for um objeto GridItemBreakpointObjectConfig, as propriedades são aplicadas somente no breakpoint pedido.

sm

GridItemBreakpointObjectConfig | number

• 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12

• { size?: number, align?: string, justify?: string}

Quando o viewport for maior ou igual a sm (576px), o valor passado é aplicado:

• Com os números, é definido a quantidade de colunas que o item ocupa (considerando uma base de 12 colunas).

• Se o valor numérico for 0, o item é ocultado.

• Se o valor for um objeto GridItemBreakpointObjectConfig, as propriedades são aplicadas somente no breakpoint pedido.

md

GridItemBreakpointObjectConfig | number

• 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12

• { size?: number, align?: string, justify?: string}

Quando o viewport for maior ou igual a md (768px), o valor passado é aplicado:

• Com os números, é definido a quantidade de colunas que o item ocupa (considerando uma base de 12 colunas).

• Se o valor numérico for 0, o item é ocultado.

• Se o valor for um objeto GridItemBreakpointObjectConfig, as propriedades são aplicadas somente no breakpoint pedido.

lg

GridItemBreakpointObjectConfig | number

• 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12

• { size?: number, align?: string, justify?: string}

Quando o viewport for maior ou igual a lg (960px), o valor passado é aplicado:

• Com os números, é definido a quantidade de colunas que o item ocupa (considerando uma base de 12 colunas).

• Se o valor numérico for 0, o item é ocultado.

• Se o valor for um objeto GridItemBreakpointObjectConfig, as propriedades são aplicadas somente no breakpoint pedido.

xl

GridItemBreakpointObjectConfig | number

• 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12

• { size?: number, align?: string, justify?: string}

Quando o viewport for maior ou igual a xl (1200px), o valor passado é aplicado:

• Com os números, é definido a quantidade de colunas que o item ocupa (considerando uma base de 12 colunas).

• Se o valor numérico for 0, o item é ocultado.

• Se o valor for um objeto GridItemBreakpointObjectConfig, as propriedades são aplicadas somente no breakpoint pedido.

xxl

GridItemBreakpointObjectConfig | number

• 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12

• { size?: number, align?: string, justify?: string}

Quando o viewport for maior ou igual a xxl (1440px), o valor passado é aplicado:

• Com os números, é definido a quantidade de colunas que o item ocupa (considerando uma base de 12 colunas).

• Se o valor numérico for 0, o item é ocultado.

• Se o valor for um objeto GridItemBreakpointObjectConfig, as propriedades são aplicadas somente no breakpoint pedido.