SGrid <s-grid>

Um contêiner de CSS grid para organizar conteúdo em linhas e colunas. SGrid é o wrapper de Vue 3 tipado do web component <s-grid> do Shopify Polaris.

import { SGrid } from 'polaris-vue-elements'

Escrevendo seu próprio CSS em volta de <SGrid>? Use as variáveis CSS do Polaris (--p-space-*, --p-color-*, …) para que seu layout combine com os componentes.

Boas práticas

• Pense nas telas menores. Um grid que funciona no desktop pode desmoronar no celular. Decida como ele deve se reorganizar em larguras menores em vez de fixar um único layout.
• Use um espaçamento consistente. Espaços uniformes entre os itens dão ao layout um ritmo estável e facilitam a leitura, então evite misturar abordagens de espaçamento dentro de um mesmo grid.
• Considere o conteúdo que não cabe. As células têm dimensões definidas, mas o tamanho do conteúdo varia. Decida de antemão se um conteúdo longo ou largo demais deve quebrar linha, ser truncado ou rolar.
• Use um componente mais simples quando ele bastar. SGrid é poderoso, mas acrescenta complexidade, então verifique se um componente de layout mais simples resolve e reserve o grid para os casos que precisam do que ele oferece.

Veja as boas práticas da Shopify para <s-grid> (em inglês) para todas as recomendações.

Exemplo

Column 1Column 2Column 1Column 2

<script setup>
import { SGrid, SGridItem, SBox, SText } from 'polaris-vue-elements'
</script>

<template>
  <!-- SGrid controls the track layout (columns/rows/gap); each SGridItem is a cell. -->
  <SGrid gridTemplateColumns="1fr 1fr" gap="base">
    <SGridItem>
      <SBox background="subdued" padding="base" borderRadius="200">
        <SText>Column 1</SText>
      </SBox>
    </SGridItem>
    <SGridItem>
      <SBox background="subdued" padding="base" borderRadius="200">
        <SText>Column 2</SText>
      </SBox>
    </SGridItem>
    <SGridItem>
      <SBox background="strong" padding="base" borderRadius="200">
        <SText>Column 1</SText>
      </SBox>
    </SGridItem>
    <SGridItem>
      <SBox background="strong" padding="base" borderRadius="200">
        <SText>Column 2</SText>
      </SBox>
    </SGridItem>
  </SGrid>
</template>

Props

Prop	Tipo	Descrição
accessibilityLabel	string	Um rótulo que descreve a finalidade ou o conteúdo do elemento. Quando definido, é anunciado aos usuários de tecnologias assistivas e oferece mais contexto a eles. Use-o apenas quando o conteúdo do elemento não oferecer contexto suficiente para usuários de tecnologias assistivas.
accessibilityRole	"generic" | "status" | "main" | "header" | "footer" | "section" | "region" | "aside" … (9 more)	Define o significado semântico do conteúdo do componente. Quando definido, o papel (role) é usado pelas tecnologias assistivas para ajudar os usuários a navegar pela página.
accessibilityVisibility	"visible" | "hidden" | "exclusive"	Altera a visibilidade do elemento. - visible: o elemento fica visível para todos os usuários. - hidden: o elemento é removido da árvore de acessibilidade, mas continua visível. - exclusive: o elemento fica visualmente oculto, mas permanece na árvore de acessibilidade.
alignContent	"normal" | "stretch" | "baseline" | "first baseline" | "last baseline" | "center" | "start" | "end" … (9 more)	Alinha a grade ao longo do eixo de bloco. Substitui o valor de bloco de placeContent.
alignItems	"normal" | "stretch" | "baseline" | "first baseline" | "last baseline" | "center" | "start" | "end" … (6 more)	Alinha os itens da grade ao longo do eixo de bloco.
background	"subdued" | "base" | "strong" | "transparent"	A cor de fundo do componente.
blockSize	"auto" | "0"	O tamanho vertical do elemento em layouts padrão (altura em modos de escrita da esquerda para a direita ou da direita para a esquerda). O tamanho em bloco se ajusta de acordo com a direção da escrita: em layouts horizontais, controla a altura; em layouts verticais, controla a largura. Isso garante um comportamento consistente em diferentes direções de texto. Saiba mais sobre block-size.
border	BorderShorthand	Uma borda aplicada com sintaxe abreviada para especificar a largura, a cor e o estilo em uma única propriedade.
borderColor	"subdued" | "base" | "strong"	A cor da borda usando a escala de cores do design system. Quando definida, substitui o valor de cor especificado na propriedade border. Escolha entre subdued, base ou strong de acordo com a ênfase visual necessária.
borderRadius	MaybeAllValuesShorthandProperty<BoxBorderRadii>	O arredondamento dos cantos do elemento, usando a escala de raio do design system. Suporta a sintaxe de 1 a 4 valores para especificar raios diferentes por canto. Use isto para criar cantos arredondados ou elementos totalmente arredondados.
borderStyle	"" | MaybeAllValuesShorthandProperty<BoxBorderStyles>	O estilo visual da borda em todos os lados, como sólida, tracejada ou pontilhada. Quando definido, sobrescreve o valor de estilo especificado na propriedade border. Suporta a sintaxe de 1 a 4 valores para especificar estilos diferentes por lado.
borderWidth	"" | MaybeAllValuesShorthandProperty<"base" | "small-100" | "small" | "large" | "large-100" | "none">	A espessura da borda em todos os lados. Quando definida, sobrescreve o valor de largura especificado na propriedade border. Suporta a sintaxe de 1 a 4 valores para especificar larguras diferentes por lado.
columnGap	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	Ajusta o espaçamento entre os elementos no eixo em linha. Substitui o valor de coluna de gap. Aceita: - Um único valor de SpacingKeyword, como large-100 - Uma string de valor responsivo com o SpacingKeyword compatível como valor de consulta
display	"auto" | "none"	O tipo de display externo do componente. O tipo externo define como o componente participa do layout de fluxo. - auto o valor inicial do componente. O valor real depende do componente e do contexto. - none oculta o componente e o remove da árvore de acessibilidade, tornando-o invisível para leitores de tela.
gap	MaybeResponsive<MaybeTwoValuesShorthandProperty<SpacingKeyword>>	Ajusta o espaçamento entre os elementos. Aceita: - Um único valor de SpacingKeyword aplicado aos dois eixos, como large-100 - Um par de valores, como large-100 large-500, para definir os eixos em linha e de bloco, respectivamente - Uma string de valor responsivo com o SpacingKeyword compatível como valor de consulta
gridTemplateColumns	string	As colunas da grade e seus tamanhos. Aceita: - Valores de dimensionamento de trilhas, como 1fr auto - Uma string de valor responsivo com os valores de dimensionamento de trilhas compatíveis como valor de consulta
gridTemplateRows	string	As linhas da grade e seus tamanhos. Aceita: - Valores de dimensionamento de trilhas, como 1fr auto - Uma string de valor responsivo com os valores de dimensionamento de trilhas suportados como valor de consulta
inlineSize	"auto" | "0"	A largura em modos de escrita horizontais, ou a altura em modos de escrita verticais. Use isto para um dimensionamento relativo ao fluxo que se adapta à direção do texto. Saiba mais sobre inline-size.
justifyContent	"normal" | "stretch" | "center" | "start" | "end" | "unsafe center" | "unsafe start" | "unsafe end" … (6 more)	Alinha a grade ao longo do eixo em linha. Substitui o valor em linha de placeContent.
justifyItems	"normal" | "stretch" | "baseline" | "first baseline" | "last baseline" | "center" | "start" | "end" … (6 more)	Alinha os itens da grade ao longo do eixo em linha.
maxBlockSize	"none" | "0"	A altura máxima em modos de escrita horizontais, ou a largura máxima em modos de escrita verticais. Impede que o elemento cresça além desse tamanho. Saiba mais sobre max-block-size.
maxInlineSize	"none" | "0"	A largura máxima em modos de escrita horizontais, ou a altura máxima em modos de escrita verticais. Impede que o elemento cresça além desse tamanho. Saiba mais sobre max-inline-size.
minBlockSize	"0"	A altura mínima em modos de escrita horizontais, ou a largura mínima em modos de escrita verticais. Impede que o elemento encolha abaixo desse tamanho. Saiba mais sobre min-block-size.
minInlineSize	"0"	A largura mínima em modos de escrita horizontais, ou a altura mínima em modos de escrita verticais. Impede que o elemento encolha abaixo desse tamanho. Saiba mais sobre min-inline-size.
overflow	"visible" | "hidden"	Define o comportamento de overflow do elemento. - hidden: corta o conteúdo quando ele é maior que o contêiner do elemento. O elemento não poderá ser rolado e os usuários não conseguirão acessar o conteúdo cortado arrastando ou usando a roda do mouse. - visible: o conteúdo que ultrapassa o contêiner do elemento fica visível.
padding	MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>	O padding aplicado a todas as bordas do componente. Suporta a sintaxe de 1 a 4 valores com valores relativos ao fluxo: - 1 valor se aplica a todos os lados - 2 valores se aplicam a block (topo/base) e inline (esquerda/direita) - 3 valores se aplicam a block-start (topo), inline (esquerda/direita) e block-end (base) - 4 valores se aplicam a block-start (topo), inline-end (direita), block-end (base) e inline-start (esquerda) Exemplos:* base, large none, base large-100 base small Use auto para herdar o padding do contêiner mais próximo com padding removido. Também aceita uma string de valor responsivo com o PaddingKeyword suportado como valor de consulta.
paddingBlock	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	O espaçamento interno na direção de bloco (em cima e embaixo em modos de escrita horizontais). Aceita um único valor para os dois lados ou dois valores separados por espaço para block-start e block-end. Exemplo:* large none aplica large em cima e none embaixo. Substitui o valor de bloco de padding. Também aceita uma string de valor responsivo com o PaddingKeyword compatível como valor de consulta.
paddingBlockEnd	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	O espaçamento interno block-end (embaixo em modos de escrita horizontais). Substitui o valor block-end de paddingBlock. Também aceita uma string de valor responsivo com o PaddingKeyword compatível como valor de consulta.
paddingBlockStart	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	O espaçamento interno block-start (em cima em modos de escrita horizontais). Substitui o valor block-start de paddingBlock. Também aceita uma string de valor responsivo com o PaddingKeyword compatível como valor de consulta.
paddingInline	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	O padding na direção em linha (esquerda e direita em modos de escrita horizontais). Aceita um único valor para os dois lados ou dois valores separados por espaço para inline-start e inline-end. Exemplo:* large none aplica large à esquerda e none à direita. Sobrescreve o valor em linha de padding. Também aceita uma string de valor responsivo com o PaddingKeyword suportado como valor de consulta.
paddingInlineEnd	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	O padding no fim da linha (direita em modos de escrita LTR, esquerda em RTL). Sobrescreve o valor inline-end de paddingInline. Também aceita uma string de valor responsivo com o PaddingKeyword suportado como valor de consulta.
paddingInlineStart	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	O padding no início da linha (esquerda em modos de escrita LTR, direita em RTL). Sobrescreve o valor inline-start de paddingInline. Também aceita uma string de valor responsivo com o PaddingKeyword suportado como valor de consulta.
placeContent	"normal normal" | "normal stretch" | "normal center" | "normal start" | "normal end" | "normal unsafe center" | "normal unsafe start" | "normal unsafe end" … (3 more)	Uma propriedade abreviada para justify-content e align-content.
placeItems	AlignItemsKeyword | "normal normal" | "normal stretch" | "normal baseline" | "normal first baseline" | "normal last baseline" | "normal center" | "normal start" … (2 more)	Uma propriedade abreviada para justify-items e align-items.
rowGap	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "small-500" | "small-400" … (6 more)	Ajusta o espaçamento entre os elementos no eixo de bloco. Substitui o valor de linha de gap. Aceita: - Um único valor de SpacingKeyword, como large-100 - Uma string de valor responsivo com o SpacingKeyword compatível como valor de consulta

Algumas colunas de tipo acima estão truncadas para facilitar a leitura; a união completa está disponível nos tipos TypeScript gerados da biblioteca (src/lib/generated/types.ts).

Slots

Slot	Descrição
default	Os elementos filhos exibidos dentro do componente de grade, organizados em um layout de grade flexível com colunas, linhas e espaçamento configuráveis.