Generador de cuadrícula CSS
Opciones de cuadrícula
Vista previa en vivo
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.
Comprobaciones de CSS Grid antes de publicar un layout
Un grid válido con un ejemplo puede desbordar, reordenar contenido o colapsar ante contenido largo o intrínseco.
Tamaño de tracks
Prueba minmax(), auto, fr, tamaños intrínsecos y min-width con palabras largas, imágenes, celdas vacías y valores grandes.
Colocación responsive
Verifica tracks explícitos e implícitos, auto-placement, dense packing, spans y áreas nombradas en cada transición.
Orden de lectura
Mantén la colocación visual alineada con el DOM y el teclado para evitar una secuencia inaccesible.
Overflow y anidación
Revisa gaps, grids anidados, soporte de subgrid, scroll containers y elementos cuyo ancho fuerza el grid.
Herramientas relacionadas
Estas herramientas también pueden resultarle útiles.