Criar conta Criar conta
Playground de CSS Grid

Playground de CSS Grid

Monte e visualize layouts com CSS Grid em tempo real — construtor, código manual, predefinições e cópia instantânea

Gerador de gradientes Crie gradientes lineares, radiais e cônicos com prévia ao vivo.
Gerador de gradiente mesh Gradientes mesh fluidos em WebGL — exporte como CSS ou imagem.
Gerador de clamp() Tipografia e espaçamentos fluidos com CSS clamp().
Gerador de border-radius Editor visual de border-radius — de cantos simples a formas blob.
Gerador de box-shadow Sombras CSS em camadas com prévia ao vivo e predefinições.
Gerador de clip-path Crie formas com clip-path: predefinições, polígonos e pontos arrastáveis.
Gerador de neumorfismo Sombras soft UI: estilos plano, côncavo, convexo e pressionado.
Gerador de Liquid Glass Superfícies inspiradas no Liquid Glass: vidro fosco, distorção e lente cromática.
Mixins SCSS Biblioteca de mixins SCSS prontos para usar.
Controles
Prévia ao vivo

—

12 itens

Mais ferramentas: CSS

Gerador de gradientes
Crie gradientes lineares, radiais e cônicos com prévia ao vivo.
Gerador de gradiente mesh
Gradientes mesh fluidos em WebGL — exporte como CSS ou imagem.
Gerador de clamp()
Tipografia e espaçamentos fluidos com CSS clamp().

Como o playground de CSS Grid funciona

Monte layouts com CSS Grid visualmente ou com código manual. Comece por predefinições, personalize em tempo real e copie CSS pronto para produção.

Construtor visual

Defina linhas, colunas e espaçamentos visualmente. Arraste os controles deslizantes ou digite valores exatos — o grid se atualiza em tempo real. Para começar, não é preciso saber CSS.

CSS manual

Mude para o modo manual e escreva grid-template-columns, grid-template-rows e gap você mesmo. A prévia mostra o resultado enquanto você digita.

Biblioteca de predefinições

Comece por padrões de layout comuns — “santo graal”, barra lateral, dashboard, grade de cards e outros. Cada predefinição gera código editável que você pode personalizar.

Copiar CSS

Copie o código de CSS Grid gerado com um clique. O código é limpo, pronto para produção e usa a sintaxe moderna de grid, compatível com todos os principais navegadores.

Perguntas frequentes

CSS Grid é um sistema de layout bidimensional nativo do CSS. Ele permite definir linhas e colunas e posicionar elementos nas células sem floats nem gambiarras de posicionamento. O Grid funciona em todos os navegadores modernos e é o padrão para layouts de página complexos.

Use Grid em layouts bidimensionais, em que você precisa controlar linhas e colunas ao mesmo tempo — dashboards, grades de cards e templates de página. Use Flexbox para alinhamento em uma dimensão — barras de navegação, grupos de botões e elementos em linha.

Sim. Um item do grid pode ser, ele mesmo, um contêiner grid. Isso é comum em dashboards: a página inteira é um grid, e cada painel tem o seu próprio subgrid para o layout interno.

A unidade fr significa “fração do espaço disponível” (fraction). 1fr 2fr quer dizer que a segunda coluna recebe o dobro do espaço da primeira. É a forma mais flexível de dimensionar as trilhas do grid e evita cálculos manuais de porcentagem.