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, defina as propriedades do contêiner e abra as Configurações para estilizar cada filho: order, flex-grow, flex-shrink, flex-basis e align-self no modo Flex, ou span de coluna/linha e align-self no modo Grid. O modo Grid também oferece dimensionamento de trilhas personalizado — digite qualquer valor de grid-template-columns/rows como 200px 1fr ou repeat(auto-fit, minmax(120px, 1fr)) — e um editor visual de grid-template-areas onde você nomeia cada célula, o que também cria linhas de grade nomeadas. Uma prévia ao vivo de blocos numerados reflete cada mudança, e você pode exportar só a regra .container ou o contêiner mais o CSS por item.

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. Defina as propriedades do contêiner — flex-direction/wrap e justify/align, ou o número de colunas e linhas com justify-items/align-items.
3. Abra as Configurações para mudar o gap e a contagem de itens, e para estilizar cada filho (order, flex-grow/shrink/basis, align-self ou span de coluna/linha).
4. No Grid, mude o dimensionamento de trilhas para Personalizado e digite seus próprios grid-template-columns/rows — px, fr, minmax() ou repeat(auto-fit/auto-fill, …).
5. Ative o editor de grid-template-areas e nomeie cada célula para posicionar os itens por área.
6. Escolha exportar só o CSS do contêiner ou o contêiner mais o CSS por item e copie o resultado.

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 · custom columns: repeat(auto-fit, minmax(120px, 1fr)) · gap 16

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

Grid · areas: header row, sidebar + main, footer row

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Flex · export container + items · item 2 flex-grow 1

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

.container > :nth-child(2) {
  flex-grow: 1;
}

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 os organiza em duas dimensões com grid-template-columns e grid-template-rows mais justify-items e align-items. Alterne de modo com o seletor para comparar como cada um lida com o mesmo alinhamento.

Como estilizo itens individuais?

Abra as Configurações e use os controles por item para definir order, flex-grow, flex-shrink, flex-basis e align-self (Flex) ou span de coluna/linha e align-self (Grid) em cada filho. Coloque Exportar em 'Contêiner + itens' e a ferramenta adiciona uma regra .container > :nth-child(n) para cada item que você personalizar.

Posso usar tamanhos de trilha personalizados como auto-fit ou minmax()?

Sim. No modo Grid mude o dimensionamento de trilhas para Personalizado e digite qualquer valor válido de grid-template-columns/rows — pixels, unidades fr, minmax() ou repeat(auto-fit/auto-fill, minmax(120px, 1fr)) para colunas responsivas. A prévia e o CSS gerado se atualizam enquanto você digita.

O que o editor de grid-template-areas faz?

Ative-o no modo Grid e nomeie cada célula da grade; a ferramenta monta uma declaração grid-template-areas e células vazias viram um ponto. Nomear áreas também cria linhas de grade nomeadas, e você pode posicionar um filho em uma área digitando o nome dela no campo grid-area daquele item.

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.