Toolipedia Incorporar
PT
← Todas as ferramentas de texto

Gerador de CSS grid

Monte um layout em grade com colunas, linhas e espaçamentos, com visualização ao vivo.

  • Grátis
  • Sem cadastro
  • Funciona em qualquer dispositivo

Cerca de Gerador de CSS grid

Defina o número de colunas e linhas, o tamanho do espaçamento e o das faixas em unidades fr, px ou auto, e veja a grade se atualizar ao vivo antes de copiar o CSS. A unidade fr divide o espaço livre proporcionalmente, então 1fr 2fr dá uma segunda coluna com o dobro da largura da primeira.

Como usar: Gerador de CSS grid

  1. Defina o número de colunas e linhas da sua grade.
  2. Ajuste o tamanho das colunas e linhas e o espaço entre as células.
  3. Copie o código CSS grid e cole na sua folha de estilos.

Por que usar esta ferramenta?

Também conhecido como

Perguntas frequentes

O que significa a unidade fr no CSS Grid?

Um fr é uma fração do espaço restante no contêiner da grade. Com colunas de 1fr 1fr 2fr, o espaço é dividido em quatro partes, e a última coluna recebe duas.

Como deixo uma grade responsiva?

Use tamanhos flexíveis, como unidades fr ou minmax, em vez de pixels fixos, e mude o número de colunas em uma media query para telas pequenas.

Qual é a diferença entre gap e margin em uma grade?

O gap adiciona espaço apenas entre as células, não na borda externa. As margens adicionam espaço ao redor de cada item e podem dobrar entre vizinhos.

Gerador de CSS grid é grátis?

Sim. Gerador de CSS grid no Toolipedia é de uso gratuito, sem cadastro e sem marca d'água.

É seguro usar?

Sim. Tudo é calculado no seu navegador, e nada do que você digita é enviado ao nosso servidor.

Funciona no meu celular?

Sim. Funciona em qualquer navegador moderno no Android e no iPhone, além de tablets e computadores. Não é preciso instalar nada.

Preciso de uma conta?

Não. É só abrir a página e usar a ferramenta. Sem cadastro e sem e-mail.

Posso colocar Gerador de CSS grid no meu próprio site?

Sim. Use o botão «Incorporar no seu site» abaixo da ferramenta para copiar um trecho curto de código e colá-lo na sua página. É grátis, não precisa de conta e a ferramenta continua funcionando dentro da sua página.

Ferramentas relacionadas