Gerador de layout CSS

Visualize um layout com Flexbox ou Grid.

No seu dispositivo · Sem conta

Gerador de layout CSS processa os dados que você informa neste navegador. Os dados informados e os resultados ficam fora da análise de uso. As ferramentas recentes salvam nomes de ferramentas, número de visitas e horários da última visita. As ferramentas salvas armazenam apenas seus nomes. Salvar rascunhos é opcional, e eles ficam neste dispositivo; exclua o texto salvo pelos controles de rascunho. Carregar texto de uma URL é opcional e acessa o servidor correspondente; esse servidor pode ver a URL e seu endereço IP. A ação opcional “Usar em” mantém nesta aba os dados a transferir. A próxima ferramenta os remove ao abrir e os ignora se tiver passado mais de um minuto.

“Copiar link” inclui no endereço os dados que você escolher compartilhar. Qualquer pessoa com esse link pode reabri-los. Arquivos e resultados gerados ficam de fora. Ferramentas de senhas e chaves compartilham apenas as configurações.

Português

Rótulos dos itens, um por linha

Layout

Opções e arquivo local

Colunas do Grid

Espaçamento (px)

Tamanho base do Flexbox (px)

Abrir um arquivo de texto deste dispositivo

As configurações opcionais valem apenas para esta aba.

Seu resultado

Código-fonte HTML

Mais

Atalhos de teclado

Sobre links e redefinição

Os links incluem os dados que você inseriu e as configurações. Qualquer pessoa com o link pode vê-los, então não inclua textos privados. Arquivos e resultados gerados não são incluídos; os sorteios são feitos novamente.

Reiniciar recarrega a ferramenta com os valores iniciais e libera os arquivos abertos e os controles de dispositivos. Os rascunhos salvos ficam neste dispositivo até você excluí-los.

Como funciona o gerador de layout CSS

Gere um layout Grid responsivo ou um Flexbox com quebra de linha a partir dos rótulos dos itens. Altere a quantidade de colunas do Grid, o espaçamento ou o tamanho base do Flexbox e copie ou baixe o mesmo HTML independente usado na prévia.

A seguir: Formatador CSS

A seguir: Calculadora de especificidade CSS

A seguir: Verificador de contraste

Exemplo

Um Grid de três colunas usa repeat(3, minmax(0, 1fr)) para que rótulos longos possam quebrar linha dentro de colunas de mesma largura. Já o Flexbox distribui os itens em novas linhas conforme o tamanho base preferencial e o espaço disponível.

Antes de usar o resultado

A ferramenta oferece um ponto de partida para o layout, sem substituir um construtor de sites completo ou uma análise de compatibilidade entre navegadores. A prévia usa estilos fixos de demonstração. O Grid mantém a quantidade de colunas escolhida mesmo em larguras estreitas; adicione media queries quando o projeto final precisar de outras quantidades.

Atualizado 7 de outubro de 2026

Como citar esta página

Estilo de citação

ToolOctopus. “Gerador de layout CSS.” Atualizado 7 de outubro de 2026. https://tooloctopus.com/pt/gerador-de-layout-css.

Inclua a data de acesso se as suas instruções exigirem.

As citações são formatadas com citeproc-js, de Frank Bennett, e estilos da Citation Style Language. Licença e código-fonte.