Ciencias de la Computación · Ceibal · Parte 1 de 2: Conceptos básicos
▦ CSS Grid
Sección 1 de 5

Una cuadrícula de verdad: así piensa CSS Grid

Hasta ahora alineaste elementos en una sola dirección con flex. Grid hace algo distinto: te da filas y columnas al mismo tiempo, como una hoja de cuaderno cuadriculado. Esa es la herramienta que vas a usar para armar el layout completo de una página.

📘 Este es el Recurso 1 de 2 sobre CSS Grid: acá vemos los conceptos básicos (contenedor, columnas con fr y gap). Cuando los tengas firmes, el Recurso 2 continúa con lo más avanzado: ubicar ítems con precisión, grid-template-areas, diseños responsivos y alineación.

🧠 ¿Qué es un contenedor grid?

Imaginá una hoja cuadriculada: filas y columnas ya dibujadas, listas para poner algo adentro de cada casillero. Eso es exactamente lo que hace display: grid; con un elemento: lo convierte en un contenedor grid, y todos sus hijos directos pasan a ser ítems grid que se acomodan dentro de esa cuadrícula.

Ya conocés display: flex, que alinea en una sola dirección (una fila o una columna). Grid es la herramienta para cuando necesitás filas y columnas a la vez: la forma natural de armar el layout completo de una página.

.contenedor {
  display: grid; /* así de simple empieza */
}
▦ Con display: grid;, el elemento pasa a ser el CONTENEDOR y sus hijos directos son los ÍTEMS. Todavía no hay columnas ni filas definidas: eso es el próximo paso.
🧩 ¿Lo entendiste? · Ordená los pasos
1 · Ordenar: los pasos para armar un grid

Arrastrá estos pasos del primero al último.

2️⃣ Filas y columnas explícitas

grid-template-columns define cuántas columnas tiene tu cuadrícula y qué ancho tiene cada una. grid-template-rows hace lo mismo con las filas. Le pasás un valor por cada columna (o fila) que quieras, separados por espacio.

Si tenés más ítems que columnas definidas, no pasa nada raro: Grid los sigue acomodando, empezando una fila nueva de forma automática.

.contenedor {
  display: grid;
  grid-template-columns: 100px 100px 100px; /* 3 columnas de 100px */
  grid-template-rows: 80px 80px; /* 2 filas de 80px */
}
💡 Contás un valor por cada columna que querés: tres valores en grid-template-columns son tres columnas, sin importar cuántos ítems tengas adentro.
🧩 ¿Lo entendiste? · Completá el código
2 · Completar: armar una cuadrícula de 3 columnas
/* Convertí el contenedor en una cuadrícula */
.galeria { : grid; }

/* 3 columnas iguales de 120px cada una */
.galeria { : 120px 120px 120px; }

⚙️ Vé la cuadrícula en vivo

Movés el control y mirás cómo se reparte el ancho disponible entre la cantidad de columnas que elijas, usando repeat() — un atajo que evita escribir 1fr muchas veces. Lo vas a ver en detalle en la próxima sección.

1
2
3
4
5
6

    
Si hay más celdas que columnas, Grid arma solo una fila nueva. Probá bajar a 1 o 2 columnas y mirá qué pasa.

  

        

        

      


      

        
✅ Repaso rápido

        

        

          
Antes de pasar a la unidad fr, repasemos lo esencial de esta sección con algunas preguntas.

        

        

          
▦ Contenedor grid = display: grid;
▦ Ítems = los hijos directos
▦ grid-template-columns / -rows = cuántas y de qué tamaño

        



        ✅ Repaso rápido · Opción múltiple
        


3 · Opción múltiple: contenedor y celdas

        
Elegí una opción por pregunta.

        


        

      

        

      


    

    

      
      

      
    

  




  

        🎯 PRÁCTICA de Grid — armá una galería de fotos
        

  
El HTML ya está armado con 6 tarjetas de producto: vos ponés el CSS para convertirlas en una cuadrícula. Tab inserta 2 espacios.

  
    
    
  1. En .galeria, agregá display: grid; para activar la cuadrícula.
    2. 
    
  2. En la misma clase, agregá grid-template-columns con 3 valores en px (por ejemplo 180px 180px 180px) para armar 3 columnas.
    3. 
    
  3. Ejecutá y mirá cómo las 6 tarjetas se acomodan solas en 2 filas de 3 columnas.
    4. 
    
  4. Probá cambiar a 2 valores en grid-template-columns y ejecutá de nuevo: ¿en cuántas filas quedan ahora las 6 tarjetas?
    5. 
  

  

    

      
      
    

    

      
/ HTML

      

    

    
    

      
      
      
    

    

  

        

  









  
La unidad que reparte el espacio sobrante: fr

  
Definir columnas en px funciona, pero es rígido: si la pantalla cambia de ancho, esas columnas no se adaptan. La unidad fr (fracción) resuelve justo eso: reparte el espacio disponible del contenedor entre las columnas, en las proporciones que vos elijas.


    

    

      

      
      
      
      
      
      

    

    

    


      

        
🍕 La unidad fr: fracciones flexibles

        

        

          
Pensá en fr como porciones de una pizza: si decís 1fr 1fr, estás pidiendo dos porciones iguales del espacio disponible. Si decís 2fr 1fr, la primera columna se lleva el doble de espacio que la segunda.

          
La diferencia clave con px: fr siempre reparte lo que sobra después de descontar cualquier columna de ancho fijo. Por eso se adapta solo cuando cambia el tamaño de la pantalla.

        

        


.contenedor {
  display: grid;
  grid-template-columns: 2fr 1fr; /* la primera, el doble de ancha */
}

        



        🧩 ¿Lo entendiste? · Arrastrá cada código a su resultado
        


4 · Arrastrar y soltar: cada declaración con lo que arma

        
Arrastrá la declaración correcta a cada resultado. Hay una declaración trampa.

        

        

          
Dos columnas iguales, todo el ancho repartido → 

          
Una columna fija de 200px y el resto para la otra → 

          
Tres columnas iguales, escrito con el atajo → 

        

        
        


        

      

        

      


      

        
2️⃣ Mezclando fr con píxeles

        

        

          
El truco más usado en layouts reales: combinar un valor fijo con fr. Es el patrón clásico de barra lateral + contenido: la barra lateral mide siempre lo mismo, y el contenido ocupa todo lo que sobra.

        

        


.pagina {
  display: grid;
  grid-template-columns: 220px 1fr; /* barra fija + contenido flexible */
}

          
💡 200px 1fr primero reserva 200px fijos y recién después reparte TODO lo que queda en 1fr. Por eso el contenido nunca se desborda, cambie lo que cambie el ancho de pantalla.

        

        

      


      

        
🔁 repeat() para no repetirte

        

        

          
Escribir 1fr 1fr 1fr 1fr 1fr a mano es tedioso y fácil de errar. repeat(cantidad, valor) hace exactamente lo mismo, pero repitiendo el valor la cantidad de veces que le pidas.

        

        


/* Estas dos líneas arman EXACTAMENTE la misma cuadrícula */
.a { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
.b { grid-template-columns: repeat(5, 1fr); }

        



        🧩 ¿Lo entendiste? · Completá el código
        


5 · Completar: usar repeat()

        
/* La misma cuadrícula de 3 columnas, con el atajo */
.contenedor { grid-template-columns: (3, 1fr); }

/* Cuatro columnas iguales */
.contenedor { grid-template-columns: repeat(, 1fr); }

        
        


        

      

        

      


      

        
⚙️ Vé el reparto en vivo

        

        

          
Movés los tres controles y mirás cómo cada columna se lleva una porción proporcional a su número de fr. Probá dejar una en 1 y otra en 5: la diferencia de ancho es enorme.

        

        



    

      
      
      
    

    

      

        
A

        
B

        
C

      

    

    

    
Las tres celdas siempre ocupan el 100% del ancho: fr solo cambia cómo se reparte ese espacio entre ellas.

  

        

        

      


      

        
✅ Repaso rápido

        

        

          
Antes de ver gap, repasemos fr y repeat() con algunas preguntas.

        

        

          
🍕 fr reparte el espacio SOBRANTE, en proporción.
🔁 repeat(n, valor) repite un valor n veces.

        



        ✅ Repaso rápido · Opción múltiple
        


6 · Opción múltiple: la unidad fr

        
Elegí una opción por pregunta.

        


        

      

        

      


    

    

      
      

      
    

  




  

        🎯 RETO: convertí tu galería en un layout de barra lateral + contenido
        

  
El HTML ya tiene una barra lateral y un bloque de contenido: vos armás la cuadrícula con CSS.

  
    
    
  1. En .pagina, agregá display: grid;.
    2. 
    
  2. En la misma clase, agregá grid-template-columns: 200px 1fr; para que la barra lateral quede fija y el contenido use el resto.
    3. 
    
  3. Ejecutá y verificá que la barra lateral no cambie de ancho aunque el contenido tenga mucho texto.
    4. 
    
  4. Probá cambiar 200px por 2fr y ejecutá de nuevo: ¿qué le pasa a la proporción entre las dos columnas?
    5. 
  

  

    

      
      
    

    

      
/ HTML

      

    

    
    

      
      
      
    

    

  

        

  









  
gap: separar celdas sin desordenar los bordes

  
Ya sabés armar columnas y filas. Ahora falta lo último para que tu cuadrícula se vea prolija: un espacio parejo entre celda y celda, sin tocar los bordes exteriores. Para eso existe gap.


    

    

      

      
      
      
      
      

    

    

    


      

        
🤔 El problema de usar margin

        

        

          
Podrías separar las celdas con margin en cada una, pero aparece un problema clásico: las celdas del medio quedan con el doble de separación (la suma del margin de las dos vecinas), mientras que el borde exterior de la cuadrícula queda con menos aire que el resto. El resultado se ve desparejo.

        

        

          
⚠️ margin empuja hacia afuera de CADA celda por separado: por eso se acumula entre vecinas y deja el contorno exterior distinto al resto.

        

        

      


      

        
2️⃣ gap, row-gap y column-gap

        

        

          
gap resuelve el problema anterior de raíz: crea espacio solo entre celdas, nunca en el borde exterior de la cuadrícula. Es una propiedad del contenedor, no de cada ítem.

          
Si querés un espacio distinto para filas y columnas, usás row-gap (entre filas) y column-gap (entre columnas) por separado. gap es el atajo que fija los dos a la vez.

        

        


.contenedor {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px; /* mismo espacio en filas y columnas */
}

        



        🧩 ¿Lo entendiste? · Completá el código
        


7 · Completar: separar celdas con gap

        
/* Espacio de 12px entre TODAS las celdas */
.contenedor { : 12px; }

/* Solo el espacio ENTRE filas, de 20px */
.contenedor { : 20px; }

/* Solo el espacio ENTRE columnas, de 8px */
.contenedor { : 8px; }

        
        


        

      

        

      


      

        
⚙️ Vé el espaciado en vivo

        

        

          
Movés el control y mirás cómo gap abre espacio entre las celdas por igual, sin tocar nunca el contorno exterior de la cuadrícula.

        

        



    

      
    

    

      

        
1

        
2

        
3

        
4

        
5

        
6

      

    

    

    
El rayado de fondo marca el borde del contenedor: fijate que ese contorno exterior no cambia, solo el espacio ENTRE celdas.

  

        

        

      


      

        
✅ Repaso general de Grid

        

        

          
Cerremos la teoría con un repaso que combina las tres secciones: contenedor, fr y gap.

        

        

          
🔲 gap separa celdas SIN afectar el borde exterior.
🔲 row-gap / column-gap para controlar cada dirección por separado.

        



        ✅ Repaso general · Opción múltiple
        


8 · Opción múltiple: repaso de Grid

        
Elegí una opción por pregunta.

        


        

      

        

      


    

    

      
      

      
    

  




  

        🎯 RETO: agregale gap parejo a tu galería
        

  
Retomamos la galería de 6 tarjetas: esta vez el objetivo es que quede prolija y espaciada.

  
    
    
  1. En .galeria, agregá display: grid; y grid-template-columns: repeat(3, 1fr);.
    2. 
    
  2. En la misma clase, agregá gap: 16px; para separar las tarjetas entre sí.
    3. 
    
  3. Ejecutá y comprobá que el espacio entre tarjetas es parejo, tanto en filas como en columnas.
    4. 
    
  4. Probá reemplazar gap por column-gap: 4px; solo, sin row-gap, y ejecutá de nuevo: ¿qué diferencia notás entre el espacio horizontal y el vertical?
    5. 
  

  

    

      
      
    

    

      
/ HTML

      

    

    
    

      
      
      
    

    

  

        

  









  
🚀 Tu turno: armá una página completa con Grid

  
Llegó el momento de combinar todo lo que viste: contenedor grid, columnas con fr, repeat() y gap, en una sola galería de productos bien armada.


  
✅ Tu diseño final debe tener

  

  
🛤️ Flujo de trabajo (método paso a paso)

  

    
1
▦ Activá la cuadrícula con display: grid.

    
2
📏 Definí las columnas con grid-template-columns.

    
3
🔁 Simplificá con repeat() si se repite un valor.

    
4
🔲 Separá las celdas con gap.

    
5
📥 Ejecutá, ajustá y descargá tu galería.

  


  

  💻 Tu simulador
  

  
El HTML ya está armado con una galería de 8 productos: vos ponés el CSS. Tab inserta 2 espacios.

  
    
    
  1. En .galeria, agregá display: grid;.
    2. 
    
  2. En la misma clase, agregá grid-template-columns usando repeat() para armar 4 columnas iguales con fr.
    3. 
    
  3. Agregá gap (por ejemplo 20px) para separar las tarjetas de forma pareja.
    4. 
    
  4. Ejecutá y revisá que los 8 productos queden en 2 filas de 4 columnas, bien espaciados.
    5. 
    
  5. Ajustá los detalles que quieras y descargá tu galería terminada.
    6. 
  

  

    

      
      
    

    

      
/ HTML

      

    

    
    

      
      
      
      
    

    

  

  

  









  
📖 Glosario interactivo

  
Tocá cualquier tarjeta para girarla: del otro lado está la definición, un ejemplo y el link a la sección donde se explica.