DeveloTools

CSS Grid Studio

Diseña layouts CSS Grid visualmente y copia el CSS listo para usar.

100% client-side

Diseño

Vista previa

Selecciona un área y luego haz clic o arrastra sobre las celdas para pintarla.

CSS generado


    


    

      
¿Qué es CSS Grid Studio?

      
CSS Grid es un sistema de maquetación del navegador para organizar elementos en filas y columnas, como una hoja de cálculo — en vez de apilar contenido con floats o trucos de flexbox. CSS Grid Studio te permite diseñar un layout de grilla visualmente (definiendo filas, columnas, espacios y áreas con nombre haciendo clic y arrastrando) y copiar el CSS exacto y listo para usar que genera, sin escribir a mano la sintaxis de grid.


      
Cómo usar CSS Grid Studio

      
    
        
  1. Define la cantidad de Filas y Columnas, y el espacio entre filas/columnas, en el panel Layout.
    2. 
        
  2. Nombra un área (por ejemplo "header") en el campo de áreas y pulsa Añadir, luego haz clic o arrastra sobre las celdas de la Vista previa para pintar esa área sobre ellas.
    3. 
        
  3. Repite el proceso para cada área que necesites (sidebar, main, footer, etc.).
    4. 
        
  4. Observa cómo el panel CSS generado se actualiza en vivo a medida que pintas.
    5. 
        
  5. Pulsa Copiar para copiar el CSS terminado al portapapeles.
    6. 
      


      
Cómo funcionan las áreas de CSS Grid

      
grid-template-areas permite nombrar regiones de una grilla y organizarlas como un mapa visual: una cadena entre comillas por fila, cada palabra indica a qué área pertenece esa celda, y un punto (.) marca una celda vacía. Cada área nombrada debe formar un rectángulo sólido; si no, el navegador rechaza toda la declaración:

      
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  grid-template-areas:
    "header header header"
    "sidebar main main";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }

      
La unidad fr distribuye el espacio sobrante luego de restar las pistas de tamaño fijo (como px) — una pista 2fr toma el doble de espacio sobrante que una 1fr. Esta herramienta genera todo esto a partir de lo que pintas, según la especificación W3C CSS Grid Layout Module Level 2 — sin librerías externas.


      
Preguntas frecuentes

      

        ¿Qué es grid-template-areas?
        
Es una propiedad de CSS Grid que permite nombrar regiones de la grilla y organizarlas como un mapa visual, una cadena entre comillas por fila, en vez de posicionar cada elemento por número de fila/columna.

      

      

        ¿Qué significa la unidad fr?
        
fr significa "fracción". Una pista de 1fr toma una parte del espacio sobrante de la grilla luego de restar las pistas de tamaño fijo (como px); 2fr toma el doble de espacio sobrante que 1fr.

      

      

        ¿Por qué mi área no genera CSS válido?
        
grid-template-areas exige que cada área nombrada forme un rectángulo sólido de celdas. Si pintas una forma no rectangular, esta herramienta lo marca y la excluye del CSS generado en vez de entregar una declaración rota.

      

      

        ¿Puedo exportar solo la cadena grid-template-areas?
        
Sí, está incluida al inicio del bloque de CSS generado junto a grid-template-columns, grid-template-rows y gap, más una regla grid-area por cada área nombrada.

      

    


    

      
Herramientas relacionadas