Gerador de CSS Grid

Construa layouts de grid responsivos com editor visual

Configurações

Espaço

Espaço entre Colunas

Espaço entre Fileiras

Largura do Contêiner

Fluxo Automático

Justificar Itens

Alinhar Itens

Justificar Conteúdo

Modelo Grid

Colunas

Fileiras

Valores comuns:

• 1fr - Uma fração do espaço disponível
• 200px - Tamanho fixo em pixels
• auto - Tamanho automático baseado no conteúdo
• minmax(100px, 1fr) - Dimensionamento responsivo
• repeat(3, 1fr) - Padrão de repetição

Presets

Itens Grid

Visualização

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Visualização com configurações atuais

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  gap: 16px;
  grid-auto-flow: row;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
  align-content: start;
}