Developer Tools
Web UtilitiesDesigner de Layout de Grade
Designer visual de CSS Grid para criar layouts de grade responsivos. Personalize colunas, linhas e espaçamentos e gere código CSS Grid pronto para produção.
Configuração de Grade
Modelos de Início Rápido
Designer Visual de Grade
Código Gerado
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
width: 400px;
height: 300px;
}HTML
<div class="grid-container">
</div>Como Usar
Posicionamento de Grade
1 / 2- starts at line 1, ends at line 21 / 3- spans 2 columns/rowsspan 2- spans 2 tracks from start position1 / -1- spans from first to last line
Dicas
- Use fr units for flexible columns
- Try different gap values for spacing
- Use span values for easier positioning
- Click cells to edit their properties
Ferramentas Relacionadas
Sobre o Designer de Layout de Grade
Como Funciona
- Configure as dimensões e o espaçamento da grade
- Adicione e posicione células no designer visual
- Edite o conteúdo, nome de classe e cor de fundo das células
- Use modelos predefinidos para começar rapidamente
- Copie ou baixe o código CSS e HTML gerado
Casos de Uso Comuns
- Design e prototipagem de layouts de sites
- Aprendizado dos fundamentos de CSS Grid
- Criação de layouts de grade responsivos
- Designs de painéis e interfaces administrativas
- Sistemas de layout baseados em cards
Perguntas Frequentes
O que é CSS Grid e como esta ferramenta ajuda?
CSS Grid é um poderoso sistema de layout que permite criar layouts complexos e responsivos com linhas e colunas. Esta ferramenta fornece uma interface visual para projetar layouts de grade sem escrever código manualmente, e depois gera o CSS e HTML correspondentes.
Como especifico posições de grade para meus elementos?
As posições de grade usam o formato "início / fim" onde os números se referem às linhas de grade. Por exemplo, "1 / 3" significa começar na linha 1 e terminar na linha 3 (abrangendo 2 faixas). Você também pode usar "span 2" para abranger 2 faixas a partir da posição inicial.
Posso criar layouts de grade responsivos com esta ferramenta?
Sim! A ferramenta gera código CSS Grid que é inerentemente responsivo. Você pode definir a largura do contêiner como "100%" para total responsividade. Para comportamento responsivo mais complexo, você pode combinar o código gerado com media queries CSS.
O que são os layouts predefinidos e como os uso?
Layouts predefinidos são padrões de grade comuns como Cabeçalho+Conteúdo+Barra lateral, Grade de Painel e Layout de Cards que fornecem pontos de partida para seus designs. Clique em qualquer predefinição para aplicar instantaneamente sua configuração e depois personalize conforme necessário.
Como adiciono, edito ou removo itens de grade?
Clique em "Adicionar Célula" para criar novos itens. Clique em qualquer célula existente para selecioná-la e editá-la. Quando uma célula é selecionada, você pode modificar seu conteúdo, nome de classe, posição e cor de fundo.
O que as opções de configuração de grade controlam?
Colunas e Linhas definem o número de faixas na sua grade. O espaçamento controla o espaço entre os itens. Largura e Altura definem as dimensões gerais do contêiner. O Nome da Classe do Contêiner define a classe CSS para o contêiner principal no código gerado.
Posso exportar meu layout de grade para usar no meu site?
Absolutamente! A ferramenta gera código CSS e HTML que você pode copiar ou baixar. O CSS inclui todas as propriedades de grade necessárias e o posicionamento dos itens. Basta copiar o código e colá-lo no seu projeto.
Como entendo o designer visual de grade?
O designer visual mostra uma visualização em tempo real do seu layout de grade. As linhas de grade definem as faixas, e os retângulos coloridos representam seus itens posicionados de acordo com os valores de grid-column e grid-row. Clique nos itens para selecioná-los.
O que são unidades fr e quando devo usá-las?
Unidades fr (fracionárias) distribuem o espaço disponível proporcionalmente no CSS Grid. Esta ferramenta usa "repeat(n, 1fr)" por padrão para tamanhos iguais. Você pode modificar o CSS gerado para usar diferentes valores fr como "1fr 2fr 1fr" para colunas com proporções 1:2:1.
Posso criar layouts complexos no estilo de revistas?
Sim! Use posições de grade sobrepostas para criar layouts no estilo de revista. Por exemplo, defina um item para abranger múltiplas colunas e linhas enquanto posiciona itens menores nas células restantes.
O código CSS gerado é compatível com todos os navegadores?
O código CSS Grid gerado funciona em todos os navegadores modernos (Chrome, Firefox, Safari, Edge) e é suportado desde 2017. Para suporte a navegadores mais antigos, pode ser necessário adicionar layouts alternativos usando flexbox ou floats.
Como posso aprender mais sobre propriedades e técnicas CSS Grid?
Esta ferramenta é ótima para aprender CSS Grid através da experimentação! Experimente diferentes configurações, examine o código gerado e veja como as mudanças afetam o layout. A seção de ajuda explica a sintaxe de posicionamento de grade.