.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 16px;
}O que é o Gerador de Grade CSS?
O Gerador de Grade CSS é um construtor visual para o Layout de Grade CSS Você escolhe quantas colunas e linhas deseja, escolhe um tamanho de trilha para cada eixo, define as lacunas e o alinhamento e uma grade de visualização reorganiza em tempo real O CSS exato que produz o que você vê fica em uma caixa pronta para cópia embaixo, para que você nunca precise escrever colunas de modelo de grade manualmente ou contar unidades de fração em sua cabeça.
CSS Grid é um modelo de layout bidimensional Ao contrário do flexbox, que coloca itens ao longo de um único eixo, a grade controla linhas e colunas ao mesmo tempo O contêiner mantém a estrutura através de um pequeno conjunto de propriedades: grade-modelo-colunas e grade-modelo-linhas definem as faixas, lacuna adiciona espaçamento entre elas, e justifique-itens, alinhar-itens, justificar-conteúdo e alinhar-conteúdo posicionar os itens e as faixas Esta ferramenta expõe essas propriedades em um painel e mostra o resultado imediatamente.
O gerador usa a função de repetição () para qualquer eixo com mais de uma trilha, então grid-template-columns: repeat (3, 1 fr) é o que você obtém para uma grade de três colunas de colunas iguais em vez de uma lista repetitiva A unidade fr representa uma fração do espaço livre no contêiner, que é o que torna os layouts da grade fluidos: três colunas 1 fr cada tomam um um terço da largura e refluem à medida que o contêiner redimensiona Você também pode misturar em auto, min-content, max-content e faixas de pixel fixas do menu track-size.
Tudo é executado inteiramente em seu navegador Não há inscrição, nada é carregado, e a ferramenta continua funcionando offline uma vez que a página tenha carregado É útil tanto como um auxílio de aprendizagem, porque você pode observar como cada propriedade muda o layout, e como uma maneira rápida de produzir CSS de grade pronta para produção para uma galeria, um painel, um layout de cartão ou um shell de página inteira A regra gerada tem como alvo uma classe . grid-container e lista apenas as propriedades que têm um efeito visível, de modo que a saída permanece limpa.
Como usar o Gerador de Grade CSS?
Defina colunas e linhas
Escolha quantas colunas e linhas a grade deve ter e observe a visualização construir as células.
Escolha tamanhos de faixa
Selecione um tamanho para as colunas e linhas, como 1fr, auto, min-content ou um valor de pixel fixo.
Sintonize lacunas e alinhamento
Defina as lacunas de linha e coluna e, em seguida, ajuste justificar e alinhar para posicionar itens e faixas.
Copie o CSS
Copie a regra de grade gerada e cole-a em sua folha de estilo ou continue ajustando a visualização.
Principais características
Pré-visualização ao vivo
Uma grade real é refluída à medida que você altera colunas, linhas, tamanhos de trilha, lacunas e alinhamento.
repetir() saída
Os eixos multi-track usam repetição () para valores curtos e legíveis de grid-template em vez de listas repetidas.
fr e faixas de conteúdo
Escolha unidades de fração, pixels automáticos, de conteúdo mínimo, de conteúdo máximo ou fixos para cada eixo.
Lacunas separadas de linhas e colunas
Defina lacunas de forma independente; a ferramenta emite a abreviação de lacuna ou um único valor automaticamente.
Frequently Asked Questions
Related Tools
CSS Animation Generator
Build CSS keyframe animations from presets like fade, slide, bounce and spin. Adjust duration, easing, delay, iteration and direction, preview live, then copy the keyframes and animation shorthand.
CSS Transform Generator
Build a CSS transform from translate, rotate, scale, skew and 3D perspective with live sliders and a preview, then copy production-ready code.
CSS Transition Generator
Build a CSS transition from property, duration, timing function and delay with a live hover preview, then copy production-ready code. Supports multiple layers.
JWT Generator
Generate and sign JSON Web Tokens with HS256, HS384, or HS512, add standard claims, and copy the token. Runs client-side.
Comments
0 comments
No comments yet. Be the first to share your thoughts!