Generador CSS Grid

Constructor visual de CSS Grid.

Presets:

Columnas (3)

Filas (2)

Espaciado columnas: 16pxEspaciado filas: 16px

JustificarAlinear

Vista previa

CSS generado

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

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

Generador CSS Grid gratuito

Construya layouts CSS Grid visualmente.

Referencia

Propiedad	Descripcion	Ejemplo
grid-template-columns	Define columnas	1fr 1fr 1fr
grid-template-rows	Define filas	auto 1fr auto
gap	Espaciado	16px
justify-items	Alineacion horizontal	stretch
align-items	Alineacion vertical	stretch

Preguntas frecuentes

Que es CSS Grid?

CSS Grid es un sistema de layout bidimensional.

Grid vs Flexbox?

Grid es 2D, Flexbox es 1D.

Que significa "fr"?

"fr" representa una fraccion del espacio disponible.

Soporte de navegadores?

Si, soportado por todos los navegadores modernos.

Grid y Flexbox juntos?

Si, se complementan perfectamente.

Herramientas relacionadas

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

𝕏 Twitter in LinkedIn

Califica esta herramienta

3.6 / 5 · 47 calificaciones

Más herramientas

📐CSS Flexbox Generator 🌈Generador de Degradados CSS 📐Em/Px Converter

Mantente actualizado

Recibe consejos de desarrollo y nuevas herramientas.

Sin spam. Cancela cuando quieras.

Enjoy these free tools?

☕Buy Me a Coffee