Generador de cuadrícula CSS
Opciones de cuadrícula
Plantilla
Espaciado
Alineación
Estado
inactivo
Vista previa en vivo
1
2
3
4
5
6
7
8
Acerca de este generador de cuadrícula CSS
Esta herramienta le ayuda a crear diseños CSS Grid sin escribir cada propiedad a mano. Puede cambiar columnas, filas, espacios y alineación mientras observa la actualización de la vista previa al instante.
Es útil para cuadrículas de tarjetas, galerías, secciones de paneles, diseños de barras laterales y experimentos de diseño rápidos antes de mover el CSS a su proyecto.
como usarlo
- Elija un ajuste preestablecido o escriba sus propios valores de columnas de plantilla de cuadrícula y filas de plantilla de cuadrícula.
- Ajuste la configuración de espacio, espacio de columna, espacio de fila y alineación.
- Consulte la vista previa en vivo para ver cómo se comporta la cuadrícula.
- Copie el CSS generado o la regla .grid completa.
Consejos
- Utilice repetir(3, 1fr) para columnas iguales.
- Utilice minmax(0, 1fr) cuando los elementos de la cuadrícula puedan contener contenido extenso.
- Utilice pistas fijas como 220px 1fr para diseños estilo barra lateral.
- Utilice justificar contenido y alinear contenido cuando la cuadrícula en sí sea más pequeña que su contenedor.
Herramientas relacionadas
Estas herramientas también pueden resultarle útiles.
Generador CSS Flexbox
Cree diseños CSS flexbox con vista previa en vivo, controles de alineación, ajuste, dirección, espacio y CSS listo para copiar.
Utilidades varias
›
Generador de patrones de fondo CSS
Cree patrones de fondo CSS con puntos, cuadrículas, rayas, líneas diagonales y tableros de ajedrez.
Utilidades varias
›
Generador de bordes CSS
Cree estilos de borde CSS con ancho, estilo, color y radio de borde.
Utilidades varias
›
Generador de gradiente CSS
Genere, analice y obtenga una vista previa de degradados lineales y radiales CSS en línea. Generador de gradientes gratuito para desarrolladores y diseñadores.
Utilidades varias
›
Preguntas frecuentes sobre el generador de cuadrícula CSS
¿Qué hace las columnas de plantilla de cuadrícula?
Define las columnas de la cuadrícula, como repetir (3, 1fr), 220px 1fr o repetir (4, minmax(0, 1fr)).
¿Cuál es la diferencia entre espacio y espacio de columna?
gap establece el espaciado entre filas y columnas. column-gap cambia solo el espacio horizontal entre columnas.
¿Puedo pegar CSS de cuadrícula existente?
Sí. Pegue reglas de cuadrícula comunes y use Parse para cargarlas en los controles.
¿Esto es sólo para cuadrículas simples?
Funciona mejor para patrones de diseño comunes, pero también puede escribir manualmente valores de seguimiento de cuadrícula personalizados.