Gerador CSS Grid

Construtor visual CSS Grid.

Presets:

Colunas (3)

Linhas (2)

Gap colunas: 16pxGap linhas: 16px

JustificarAlinhar

Pre-visualizacao

CSS gerado

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}

.grid-item {
  padding: 16px;
  background: #e2e8f0;
  border-radius: 8px;
}

HTML gerado

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

Gerador CSS Grid gratuito

Construa layouts CSS Grid visualmente.

Referencia

Propriedade	Descricao	Exemplo
grid-template-columns	Define colunas	1fr 1fr 1fr
grid-template-rows	Define linhas	auto 1fr auto
gap	Espacamento	16px
justify-items	Alinhamento horizontal	stretch
align-items	Alinhamento vertical	stretch

Perguntas frequentes

O que e CSS Grid?

CSS Grid e um sistema de layout bidimensional.

Grid vs Flexbox?

Grid e 2D, Flexbox e 1D.

O que significa "fr"?

"fr" representa uma fracao do espaco disponivel.

Suporte de navegadores?

Sim, suportado por todos os navegadores modernos.

Grid e Flexbox juntos?

Sim, se complementam perfeitamente.

Ferramentas relacionadas

CSS Flexbox Generator CSS Gradient Generator CSS Shadow Generator Em/Px Converter

𝕏 Twitter in LinkedIn

Avalie esta ferramenta

3.6 / 5 · 47 avaliações

More Tools

📐CSS Flexbox Generator 🌈CSS Gradient Generator 📐Em/Px Converter

Fique atualizado

Receba dicas de dev e novos ferramentas semanalmente.

Sem spam. Cancele a qualquer momento.

Enjoy these free tools?

☕Buy Me a Coffee