Playground de Flexbox e Grid CSS

O que é Playground de Flexbox e Grid CSS?

O Playground de Flexbox e Grid CSS é um ambiente visual gratuito para aprender e prototipar os dois principais modelos de layout do CSS, feito para desenvolvedores front-end, estudantes e designers. Escolha Flex ou Grid com o alternador de modo e depois defina as propriedades do contêiner com menus suspensos simples e campos numéricos: no modo Flex você controla flex-direction, flex-wrap, justify-content e align-items; no modo Grid você define quantas colunas e linhas (renderizadas como repeat(n, 1fr)) além de justify-items e align-items. Um valor de gap e uma contagem de itens se aplicam a ambos. Uma prévia ao vivo de blocos numerados mostra exatamente como seu alinhamento e espaçamento se comportam, e a regra .container CSS completa é gerada para você copiar. Use-o sempre que quiser ver como uma configuração de flex ou grid realmente fica antes de colá-la no seu projeto.

Como usar Playground de Flexbox e Grid CSS

1. Escolha Flex ou Grid com o alternador de modo para decidir qual modelo de layout construir.
2. No modo Flex, defina flex-direction, flex-wrap, justify-content e align-items nos menus suspensos.
3. No modo Grid, defina o número de colunas e linhas, além de justify-items e align-items.
4. Abra as Configurações para alterar o gap (espaçamento em px) e o número de itens exibidos na prévia.
5. Observe a prévia de blocos se reorganizar conforme você altera cada propriedade.
6. Copie a regra .container CSS gerada e cole-a na sua folha de estilos.

Exemplos

Flex · direction row · justify-content center · align-items center · gap 12

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

Grid · columns 3 · rows 2 · justify-items start · align-items stretch · gap 16

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Flex · direction column · justify-content space-between · align-items stretch · gap 8

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 8px;
}

Perguntas frequentes

Qual é a diferença entre Flexbox e Grid aqui?

O modo Flex distribui os itens ao longo de um único eixo e expõe flex-direction, flex-wrap, justify-content e align-items. O modo Grid organiza os itens em uma grade bidimensional usando grid-template-columns e grid-template-rows (escritas como repeat(n, 1fr)) com justify-items e align-items. Alterne de modo com o seletor para comparar como cada modelo lida com o mesmo alinhamento.

O que o valor de gap faz?

O gap define, em pixels, o espaço entre cada item tanto em layouts Flex quanto Grid por meio da propriedade CSS gap. Aumente-o para afastar os blocos ou deixe em 0 para um layout encostado; a prévia e o CSS gerado são atualizados instantaneamente.

Por que justify-content e align-items são escritos de forma diferente no Grid?

O Grid usa as palavras-chave start, end, center e stretch para justify-items e align-items, enquanto o Flex usa flex-start e flex-end. A ferramenta gera as palavras-chave corretas para o modo em que você está, então o CSS copiado é sempre válido.

Posso mudar quantos itens são exibidos?

Sim. Abra as Configurações e altere a contagem de itens para adicionar ou remover os blocos numerados da prévia (até 24). Isso afeta apenas a demonstração na tela; o CSS gerado descreve o contêiner, não os itens em si.

Meus dados são enviados para algum lugar?

Não. O playground roda inteiramente no seu navegador com JavaScript, então suas configurações e o CSS gerado nunca são enviados a um servidor. Ele funciona de forma privada e até offline depois que a página é carregada.