Playground de CSS Grid

Todas as ferramentas

Componha visualmente templates de CSS Grid, espaçamentos e posicionamento, depois copie o CSS de layout.

Pré-visualização

Clique num item numerado na grelha para o selecionar e reposicionar.

grid-template-columns —
grid-template-rows —
CSS gerado
—
—
Colunas
Linhas
Espaçamentos
16px
16px
Alinhamento
Itens da grelha
Item 1
Predefinições

Sobre Playground de CSS Grid

O CSS Grid Playground compõe layouts de grade reais de forma visual. Adicione e remova trilhas de coluna e linha para definir grid-template-columns e grid-template-rows, ajuste os espaçamentos entre colunas e linhas, e afine as quatro propriedades de alinhamento — justify-items, align-items, justify-content e align-content — enquanto a pré-visualização reflete cada mudança instantaneamente.

O posicionamento de itens é onde as grades realmente brilham: adicione itens, clique em um na pré-visualização para selecioná-lo e posicione-o com column start, column span, row start e row span. É assim que barras laterais, cabeçalhos e células de destaque se estendem por várias trilhas — a técnica por trás de quase todo layout de grade do mundo real.

Três predefinições — holy grail, dashboard e gallery — carregam estruturas de página clássicas que você pode dissecar e adaptar. Quando o layout estiver certo, copie o CSS gerado, que contém as regras completas do contêiner de grade e o posicionamento de cada item.

Como usar Playground de CSS Grid

  1. Adicione ou remova trilhas de coluna e linha para definir o modelo da grade.
  2. Defina o espaçamento entre colunas e entre linhas.
  3. Ajuste os controles de alinhamento: justify-items, align-items, justify-content e align-content.
  4. Adicione itens, clique em um na pré-visualização e defina seu início/span de coluna e linha para posicioná-lo.
  5. Carregue a predefinição holy grail, dashboard ou gallery para estudar um layout clássico.
  6. Copie o CSS gerado para sua folha de estilos.

Perguntas frequentes

justify-items alinha cada item dentro de sua própria célula da grade; justify-content alinha a grade inteira dentro do contêiner quando as trilhas não o preenchem. A mesma distinção se aplica verticalmente com align-items versus align-content.

Selecione o item e aumente seu column span — a saída CSS usa grid-column com um valor de span. Combinado com um row span, você pode criar barras de cabeçalho, barras laterais e grandes células de destaque dentro da mesma grade.

O esqueleto clássico de página: cabeçalho e rodapé de largura total com três colunas entre eles — navegação, conteúdo principal e uma barra lateral. Era notoriamente complicado com floats; a predefinição mostra como alguns posicionamentos de grade resolvem isso de forma limpa.

Grid é excelente para layouts bidimensionais em que linhas e colunas precisam se alinhar — estrutura de página, dashboards, galerias. Flexbox é melhor para fluxos unidimensionais como barras de ferramentas e menus. Eles se combinam bem: grid para a página, flex dentro dos componentes.

Sim, é gratuito e baseado no navegador — experimente à vontade, e nada do que você criar sai da sua máquina.
Partilhar
Ferramentas Relacionadas
Construtor de Assinatura de E-mail Crie uma assinatura de e-mail HTML profissional a partir de 30 modelos, personalize-a e guarde-a. Gratuito
Ícone para PNG Converta Bootstrap Icons, Font Awesome e mais em imagens PNG personalizadas — gratuito, no browser. Gratuito
Gerador de ícones de app Gere um conjunto completo de ícones de app prontos a publicar para a App Store e a Google Play — fundos premium com gradientes, mesh e padrões, criados a partir do seu logo. Gratuito
Gerador de favicons Crie um pacote completo de favicons a partir de um logótipo, um ícone ou um monograma — favicon.ico, PNGs modernos, ícone Apple touch, ícones PWA, manifesto web e trecho HTML. Gratuito
Gerador de Box Shadow CSS Crie box-shadows CSS em camadas com controlos deslizantes ao vivo para desvio, desfoque, propagação, cor, opacidade e inserção — pré-visualize num elemento real e copie o CSS pronto a usar instantaneamente. Gratuito
Gerador de Border-Radius CSS Crie visualmente border-radius CSS com pré-visualização em direto e copie código pronto para produção. Gratuito
Pesquisas populares
gerador de css grid playground de css grid gerador de grid-template-columns gerador de layout css grid construtor de grid-template-areas ferramenta de gap css grid visualizador de css grid
Precisa de ajuda?
Encontrou um problema com esta ferramenta? Avise a nossa equipa.
Relatar um problema

Adicione esta ferramenta gratuita ao seu próprio site — copie e cole o código abaixo.