Gerador de Grid CSS

Desenhe layouts bidimensionais de grade CSS interativamente. Arraste ou clique nas células para criar itens e copie o código pronto.

← Colunas: 4 →↑ Linhas: 4 ↓

2,3

2,4

3,1

3,2

3,3

3,4

4,1

4,2

4,3

4,4

Item 1

1/3 • 1/3

Item 2

3/5 • 1/2

Como usar:

Defina a quantidade de Linhas e Colunas nos controles.
Clique em uma célula vazia e depois clique em outra para desenhar uma área (ou clique e arraste no computador).
Selecione um item criado para ajustar seu tamanho ou removê-lo.

Templates de Layout

Tamanho dos Tracks (Colunas/Linhas)

Largura das Colunas

Col 1:

Col 2:

Col 3:

Col 4:

Altura das Linhas

Row 1:

Row 2:

Row 3:

Row 4:

Configurações do Grid

Colunas

Linhas

Espaço Colunas12px

Espaço Linhas12px

Alinhamento do Grid

Justificar Itens (Horizontal)

Alinhar Itens (Vertical)

Justificar Conteúdo

Alinhar Conteúdo

Outputs

Código CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  column-gap: 12px;
  row-gap: 12px;
}

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.item-2 {
  grid-column: 3 / 5;
  grid-row: 1 / 2;
}

Estrutura HTML

<div class="grid-container">
  <div class="item-1">Item 1</div>
  <div class="item-2">Item 2</div>
</div>

Classes Tailwind CSS

<div className="grid grid-cols-4 grid-rows-4 gap-[12px]">
  <div className="col-start-1 col-end-3 row-start-1 row-end-3">
    Item 1
  </div>
  <div className="col-start-3 col-end-5 row-start-1 row-end-2">
    Item 2
  </div>
</div>