Gerador de Grid CSS

Crie seu layout. Pegue o código.

Organize linhas, colunas e itens visualmente. Visualize seu layout em qualquer tamanho e, em seguida, exporte o HTML e o CSS limpos.

Construtor de layout de Grid CSS

Visualização ao vivo

Código somente leitura. Use os controles de layout para atualizar o código e a visualização ao vivo.

O CSS é apenas para o layout. O download do HTML inclui o código e o estilo de exemplo.

Seu layout permanece no seu navegador

De uma ideia a um layout em CSS Grid

O CSS Grid organiza o conteúdo em linhas e colunas. Este gerador visual de grid CSS permite que você crie galerias de cartões, layouts de barra lateral e dashboards sem escrever cada regra de grid manualmente. A pré-visualização usa o mesmo CSS de layout da sua exportação.

Como gerar seu grid

  1. Escolha Cartões, Barra Lateral ou Dashboard como seu layout inicial.
  2. Defina as colunas, linhas e espaçamentos. Selecione um item para alterar sua posição ou expansão.
  3. Teste uma largura de pré-visualização menor, depois copie o CSS ou baixe um exemplo de HTML completo.

Responsivo por padrão

Ative “Empilhar em telas pequenas” para gerar uma media query de 640px. Em telas menores, os itens retornam para uma única coluna na ordem do HTML. As pré-visualizações de desktop e tablet são redimensionadas para caber no seu espaço de trabalho; a largura em pixels exibida é a viewport real da pré-visualização.

O que o gerador suporta

Use até 12 colunas de largura igual, 12 linhas e 48 itens. As linhas crescem com seu conteúdo. Os itens não podem se sobrepor. Alterar o número de trilhas reorganiza seus itens; se eles não couberem, seu último layout válido é preservado. Para tamanhos de trilha personalizados, grids aninhados ou breakpoints adicionais, edite o CSS exportado no Phoenix Code.

Perguntas sobre CSS Grid

O layout baixado precisa de alguma biblioteca?

Não. A exportação usa HTML e CSS Grid nativos. O HTML baixado é um exemplo completo com estilos incorporados e funciona sem este gerador ou uma conexão com a internet.

Qual é a diferença entre CSS Grid e Flexbox?

O Grid controla linhas e colunas juntas, tornando-o útil para layouts de página e coleções de cartões. O Flexbox organiza os itens ao longo de um eixo, tornando-o útil para barras de ferramentas e navegação. Uma página pode usar ambos.

Meu layout é enviado para algum lugar?

A geração e a exportação do layout são executadas localmente no seu navegador. Os valores do layout, os rótulos e o código gerado são excluídos da análise de dados. Atualizar a página reinicia o construtor, então baixe seu HTML para salvar seu trabalho.

Continue construindo: Visualizador de HTMLFormatador de HTMLSeletor de Cores