Toolipedia Insertar
ES
← Todas las herramientas de texto

Generador de CSS grid

Crea un diseño de cuadrícula con columnas, filas y espacios, con vista previa en vivo.

  • Gratis
  • Sin registro
  • Funciona en cualquier dispositivo

Acerca de Generador de CSS grid

Define el número de columnas y filas, el tamaño del espacio y el tamaño de las pistas en unidades fr, px o auto, y observa cómo se actualiza la cuadrícula en vivo antes de copiar el CSS. La unidad fr reparte el espacio libre proporcionalmente, así que 1fr 2fr hace que la segunda columna sea el doble de ancha que la primera.

Cómo usar Generador de CSS grid

  1. Define el número de columnas y filas de tu cuadrícula.
  2. Ajusta los tamaños de columnas y filas y el espacio entre celdas.
  3. Copia el código CSS grid y pégalo en tu hoja de estilos.

¿Por qué usar esta herramienta?

También conocida como

Preguntas frecuentes

¿Qué significa la unidad fr en CSS Grid?

Un fr es una fracción del espacio sobrante en el contenedor de la cuadrícula. Con columnas de 1fr 1fr 2fr, el espacio se divide en cuatro partes y la última columna recibe dos.

¿Cómo hago que una cuadrícula sea responsive?

Usa tamaños flexibles como unidades fr o minmax en lugar de píxeles fijos, y cambia el número de columnas en una media query para pantallas pequeñas.

¿Cuál es la diferencia entre gap y margin en una cuadrícula?

El gap añade espacio solo entre celdas, no alrededor del borde exterior. Los márgenes añaden espacio alrededor de cada elemento y pueden duplicarse entre vecinos.

¿Es gratis Generador de CSS grid?

Sí. Generador de CSS grid de Toolipedia es de uso gratuito, sin registro y sin marca de agua.

¿Es seguro usarlo?

Sí. Todo se calcula en tu navegador y nada de lo que introduces se envía a nuestro servidor.

¿Funciona en mi teléfono?

Sí. Funciona en cualquier navegador moderno en Android y iPhone, y también en tabletas y computadoras. No hay que instalar nada.

¿Necesito una cuenta?

No. Solo abre la página y usa la herramienta. No hace falta registrarse ni dar un correo electrónico.

¿Puedo poner Generador de CSS grid en mi propio sitio web?

Sí. Usa el botón «Insertar en tu sitio» debajo de la herramienta para copiar un fragmento corto de código y pegarlo en tu página. Es gratis, no necesita cuenta y la herramienta sigue funcionando dentro de tu página.

Herramientas relacionadas