Gerador CSS de layouts de grade
Mostra trilhas e espaços de grade e copia o CSS.
Como usar Gerador CSS de layouts de grade
CSS grid layout generator writes grid CSS from a column count, row count and gap, and previews numbered cells. Choose 1 to 12 columns and 1 to 12 rows with a 0 to 100 px gap; columns use repeat(n, minmax(0, 1fr)) so they share the width equally, and rows size automatically. Download the rules as a .grid class in grid.css.
- Digite os valores solicitados no painel de configurações.
- Configure colunas, linhas e espaço (px).
- Execute o gerador CSS de layouts de grade, revise a saída e use os controles disponíveis para copiar ou baixar.
O que esta ferramenta suporta
Mostra trilhas e espaços de grade e copia o CSS.
- Colunas
- Range: 1 to 12
- Linhas
- Range: 1 to 12
- Espaço (px)
- Range: 0 to 100
Limites e processamento
As imagens usam o limite existente de 32 megapixels. São permitidas até 100 imagens de origem onde houver suporte. O HTML colado é limitado a 200,000 caracteres; diagramas Mermaid a 20,000 caracteres e 300 linhas. A geração de SVG e PNG exige um navegador.
Perguntas frequentes
Why does the grid use minmax(0, 1fr) instead of 1fr?
A plain 1fr track has an automatic minimum, so long words or wide content can stretch a column. minmax(0, 1fr) lets columns shrink below their content width, keeping all columns equal. The generator applies it to every column.
Can I make grid columns of different widths with this generator?
No. It produces equal-width columns with repeat() and rows set to auto height. For uneven tracks, copy the CSS and edit grid-template-columns by hand, for example to 2fr 1fr.
What does the grid CSS download contain?
grid.css contains a .grid selector with display: grid, the column and row templates and the gap. Add the class to your container element, or copy just the declarations from the text output into an existing rule.
Onde minha entrada é processada?
Esta operação processa sua fonte no seu navegador. Copiar e baixar são ações explícitas; a entrada de origem não é salva em conta nem em histórico.
Quais são os limites de entrada?
As imagens usam o limite existente de 32 megapixels. São permitidas até 100 imagens de origem onde houver suporte. O HTML colado é limitado a 200,000 caracteres; diagramas Mermaid a 20,000 caracteres e 300 linhas. A geração de SVG e PNG exige um navegador.