# Gerador CSS de layouts de grade

> Mostra trilhas e espaços de grade e copia o CSS.

[Open tool](https://www.toolcabana.com/pt-br/css-grid-layout-generator) · [Design e CSS](https://www.toolcabana.com/pt-br/category/design-and-css)

Tool ID: css-grid-layout-generator. Requested language: pt-BR. Description language: pt-BR. Complete guide translation: yes.

## Overview (en)

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.

## Supported tasks (pt-BR)

Mostra trilhas e espaços de grade e copia o CSS.

## Steps (pt-BR)

1. Digite os valores solicitados no painel de configurações.
2. Configure colunas, linhas e espaço (px).
3. Execute o gerador CSS de layouts de grade, revise a saída e use os controles disponíveis para copiar ou baixar.

## Settings

- Colunas (pt-BR; key: columns; type: number); minimum: 1; maximum: 12
- Linhas (pt-BR; key: rows; type: number); minimum: 1; maximum: 12
- Espaço (px) (pt-BR; key: gap; type: number); minimum: 0; maximum: 100

## Limitations (pt-BR)

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.

## Privacy and connections (pt-BR)

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.

## Questions (pt-BR)

### 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.

## Related tools

- [CSS clamp calculator](https://www.toolcabana.com/pt-br/css-clamp-calculator)
- [CSS flexbox playground](https://www.toolcabana.com/pt-br/css-flexbox-playground)
- [CSS cubic Bezier editor](https://www.toolcabana.com/pt-br/css-cubic-bezier-editor)
- [CSS clip-path maker](https://www.toolcabana.com/pt-br/css-clip-path-maker)