```meta title: :::grid — uma grade que se ajusta à tela description: Quantos itens couberem por linha, cada um com uma largura mínima; um por linha no celular. Cartões, números grandes ou passos. ``` _flows.md · documentação · [Blocos](/@docs/blocks)_ # :::grid Uma grade com quantos itens couberem por linha, cada um com uma largura mínima — e um por linha no celular. Os itens se separam por `---`. ## Cartões :::grid min:14 items:card ### Feito à mão Cada peça é torneada e esmaltada no ateliê. --- ### Queima dupla Duas idas ao forno deixam a peça resistente. --- ### Vai ao micro-ondas O esmalte não tem chumbo e aguenta o dia a dia. ::: ~~~text :::grid min:14 items:card ### Feito à mão Cada peça é torneada e esmaltada no ateliê. --- ### Queima dupla Duas idas ao forno deixam a peça resistente. --- ### Vai ao micro-ondas O esmalte não tem chumbo e aguenta o dia a dia. ::: ~~~ ## Números `items:stat` deixa o título de cada item grande, como um número de destaque. :::grid min:10 items:stat ### 1.240 peças entregues --- ### 98% das encomendas no prazo --- ### 12 cores de esmalte ::: ~~~text :::grid min:10 items:stat ### 1.240 peças entregues --- ### 98% das encomendas no prazo --- ### 12 cores de esmalte ::: ~~~ ## Passos `items:step` numera os itens como um processo; `cols:3` limita a três por linha, por mais larga que a tela seja. :::grid min:12 items:step cols:3 ### Escolha A peça e a cor do esmalte. --- ### Encomende Pelo formulário ou pelo WhatsApp. --- ### Receba Em duas a três semanas. ::: ~~~text :::grid min:12 items:step cols:3 ### Escolha A peça e a cor do esmalte. --- ### Encomende Pelo formulário ou pelo WhatsApp. --- ### Receba Em duas a três semanas. ::: ~~~ ## Argumentos - `min` — a largura mínima de um item, em rem: 8, 10, 12, 14, 16, 18, 20, 24 ou 28 (16 se não disser). - `cols` — no máximo quantos por linha: `auto` (o padrão), `2`, `3` ou `4`. - `items` — `plain`, `card`, `stat` ou `step`. - `align`, `space`, `flow` — alinhamento e espaços, em passos da escala do tema. - `motion` — `fade`, `rise` ou `scale` ao rolar até a grade. Um item ocupa mais colunas ou linhas com `:::cell`. Os [padrões](/@docs/patterns) de recursos, números e bento são grades.