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.
Añade un archivo y ejecuta la herramienta.
Tu archivo está listo.
Prueba otro archivo, o inténtalo de nuevo.
Ajustes
Ajusta la configuración de abajo. El resultado se actualiza sobre la marcha.
Funciona por completo en tu navegador. No se sube ningún archivo.
Funciona por completo en tu navegador. Nada se sube nunca a un servidor.
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.
Guías
Una mirada más de cerca a problemas concretos que resuelve esta herramienta.
Why CSS Grid Draws the Layout Before the Content Arrives
Most CSS layout starts with the content and lets the container follow. Grid turns that around: the parent declares rows and columns first, and items are placed onto its lines. That is why grid feels strange at first and why it holds alignment so well.
Leer la guíaHow to Make a Grid Item Span Two Columns
grid-column: 1 / span 2 makes an item cover two columns. Where you put the start line, whether you also pin the row, and what happens to the items after it are the parts that decide whether the rest of the grid still looks right.
Leer la guíaThe Holy Grail Layout With CSS Grid, and What to Change After
Header, footer, a main column between two sidebars: grid does the holy grail layout in a few lines. The first version has equal rows and equal columns, though, and that is rarely what a real page wants. Here is the whole path from preset to page.
Leer la guía
Comentarios