Herramientas · CSS · Zona de pruebas Grid
Zona de pruebas Grid
Crea un diseño CSS grid: número de pistas, espacios, alineación, y colocación por elemento, con una vista previa en vivo, y copia el código.
Funciona por completo en tu navegador. No se sube ningún archivo.
Tu archivo está listo.
Prueba otro archivo, o inténtalo de nuevo.
Cómo funciona
Elige un diseño predefinido, o empieza desde la cuadrícula 3×3 por defecto.
Ajusta el número de columnas y filas, los espacios y la alineación.
Selecciona un elemento para colocarlo con un inicio y una extensión personalizados, y copia el CSS.
Preguntas frecuentes
No. La cuadrícula y el CSS generado se construyen por completo en tu navegador.
Una colocación personalizada que supera el número de columnas o filas definido crea automáticamente una pista implícita adicional - eso es CSS válido, no un error.
justify-items coloca el contenido dentro de cada celda. justify-content coloca todo el conjunto de pistas dentro del contenedor - solo se nota la diferencia cuando las pistas no llenan el contenedor.
Sí, y es correcto. El eje de columnas de una cuadrícula sigue la dirección de la página, así que la columna 1 se dibuja en el lado físico opuesto en RTL, sin código adicional - esta herramienta muestra el comportamiento real de CSS Grid, no una aproximación de izquierda a derecha.
Comentarios