Ciencias de la Computación · Ceibal · Parte 2 de 2: Conceptos avanzados
🎯 Ubicar ítems
Sección 1 de 6

Ubicar ítems con precisión, línea por línea

En el Recurso 1 dejaste que los ítems se acomodaran solos, en orden. Ahora vas a aprender a mandar un ítem exactamente a la columna o fila que quieras, usando las líneas numeradas que arma toda cuadrícula.

📗 Este es el Recurso 2 de 2 sobre CSS Grid: acá vemos lo más avanzado. Si todavía no viste el Recurso 1 (contenedor, columnas con fr y gap), te conviene empezar por ahí.

🧠 Las líneas de la cuadrícula

Cuando definís grid-template-columns con, por ejemplo, 3 valores, no solo creás 3 columnas: también aparecen 4 líneas verticales que las delimitan, numeradas de izquierda a derecha empezando en 1. Lo mismo pasa con las filas.

Esas líneas son el sistema de coordenadas que usás para ubicar un ítem a mano, en vez de dejar que se acomode solo.

1 ┆ 2 ┆ 3 ┆ 4
col  col  col
Con 3 columnas hay 4 líneas: la 1 (borde izquierdo), la 2 y la 3 (entre columnas) y la 4 (borde derecho).

2️⃣ grid-column y grid-row

grid-column le dice a un ítem entre qué líneas verticales ubicarse, con la forma línea-inicio / línea-fin. grid-row hace lo mismo para las líneas horizontales.

Esto se escribe en el ítem, no en el contenedor: cada ítem puede tener su propia ubicación.

.destacada {
  grid-column: 1 / 3; /* ocupa de la línea 1 a la 3 */
}
💡 1 / 3 significa "desde la línea 1 hasta la línea 3": esa celda ocupa 2 columnas de ancho, no 3.
🧩 ¿Lo entendiste? · Arrastrá cada código a su resultado
1 · Arrastrar y soltar: líneas y resultado

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

Ocupa de la línea 1 a la 3 (2 columnas) → 
Ocupa de la línea 2 a la 4 (2 columnas, corrida) → 
Ocupa de la línea 1 a la 4 (3 columnas, todo el ancho) → 

🔁 El atajo span

Contar líneas a mano es incómodo. span te deja decir directamente cuántas columnas (o filas) querés ocupar, sin importar en qué línea empezás.

/* Estas dos formas arman el mismo resultado si el ítem empieza en la línea 1 */
.a { grid-column: 1 / 3; }
.b { grid-column: span 2; }
🧩 ¿Lo entendiste? · Completá el código
2 · Completar: usar span
/* Un ítem que ocupa 3 columnas, empezando donde caiga */
.destacada { grid-column:  3; }

/* Un ítem que ocupa 2 filas */
.alta { grid-row: span ; }

⚙️ Vé el span en vivo

Movés el control y mirás cómo la primera celda (destacada en amarillo) ocupa más o menos columnas, empujando al resto a acomodarse alrededor.

1
2
3
4
5

    
La cuadrícula sigue teniendo 3 columnas: cuando la celda 1 ocupa más de una, el resto simplemente sigue acomodándose después.

  

        

        

      


      

        
✅ Repaso rápido

        

        

          
Antes de pasar a grid-template-areas, repasemos cómo ubicar ítems con precisión.

        

        

          
🎯 grid-column / grid-row = línea-inicio / línea-fin
🎯 span N = "ocupá N columnas (o filas) desde acá"

        



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


3 · Opción múltiple: ubicar ítems

        
Elegí una opción por pregunta.

        


        

      

        

      


    

    

      
      

      
    

  




  

        🎯 RETO: destacá un producto en tu galería
        

  
Volvemos a la galería de productos: esta vez el primero debe destacarse ocupando más espacio que los demás.

  
    
    
  1. En .galeria, agregá display: grid; y grid-template-columns: repeat(3, 1fr);.
    2. 
    
  2. En .destacado (la primera tarjeta), agregá grid-column: span 2; para que ocupe 2 columnas.
    3. 
    
  3. Ejecutá y verificá que la primera tarjeta se vea más ancha que el resto.
    4. 
    
  4. Probá cambiar span 2 por span 3 y ejecutá de nuevo: ¿qué pasa con las tarjetas que siguen?
    5. 
  

  

    

      
      
    

    

      
/ HTML

      

    

    
    

      
      
      
    

    

  

        

  









  
grid-template-areas: dibujá el layout con palabras

  
Contar líneas funciona, pero hay una forma todavía más clara de armar un layout completo: ponerle nombre a cada zona de la página y "dibujar" el layout directamente en el CSS, como un mapa de texto.


    

    

      

      
      
      
      
      
      

    

    

    


      

        
🗺️ Nombrar zonas del layout

        

        

          
Con grid-template-areas, en el CONTENEDOR escribís una fila de texto por cada fila de tu layout, repitiendo el nombre de una zona tantas veces como celdas ocupa. El resultado se lee casi como un dibujo.

        

        


.pagina {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "cabecera cabecera"
    "menu contenido"
    "pie pie";
}

          
💡 Cada fila entre comillas es una FILA del layout. "cabecera cabecera" repetida dos veces significa que esa zona ocupa las 2 columnas.

        

        

      


      

        
2️⃣ grid-area en cada ítem

        

        

          
Ya nombraste las zonas en el contenedor. Ahora cada ÍTEM se asigna a una zona con grid-area, usando el mismo nombre que escribiste arriba.

        

        


.cabecera { grid-area: cabecera; }
.menu { grid-area: menu; }
.contenido { grid-area: contenido; }
.pie { grid-area: pie; }

        



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


4 · Completar: asignar zonas

        
/* El contenedor ya definió la zona "menu" */
.menu { : menu; }

        
        


        

      

        

      


      

        
⬛ Celdas vacías con un punto

        

        

          
¿Y si una celda del layout tiene que quedar vacía? Se marca con un punto . en vez de un nombre. Es útil para dejar "huecos" a propósito en el mapa del layout.

        

        


.pagina {
  grid-template-areas:
    "cabecera cabecera"
    ". contenido" /* celda vacía a la izquierda */
    "pie pie";
}

        

        

      


      

        
⚙️ Vé el layout en vivo

        

        

          
Elegís un layout distinto y mirás cómo, sin tocar el HTML, cambiar el texto de grid-template-areas reorganiza toda la página.

        

        



    

      
    

    

      

        
cabecera

        
menú

        
contenido

        
pie

      

    

    

  

        

        

      


      

        
✅ Repaso rápido

        

        

          
Antes de ver diseños responsivos, repasemos grid-template-areas.

        

        

          
🗺️ El contenedor "dibuja" el layout con nombres entre comillas.
🗺️ Cada ítem se ubica con grid-area: nombre;

        



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


5 · Opción múltiple: grid-template-areas

        
Elegí una opción por pregunta.

        


        

      

        

      


    

    

      
      

      
    

  




  

        🎯 RETO: armá una página con grid-template-areas
        

  
El HTML tiene cabecera, menú, contenido y pie: vos armás el layout completo con CSS.

  
    
    
  1. En .pagina, agregá display: grid; y grid-template-columns: 160px 1fr;.
    2. 
    
  2. En la misma clase, agregá grid-template-areas con 3 filas: "cabecera cabecera", "menu contenido" y "pie pie".
    3. 
    
  3. En .cabecera, .menu, .contenido y .pie, agregá grid-area con el nombre que corresponda.
    4. 
    
  4. Ejecutá y verificá que las 4 zonas queden ubicadas donde el "mapa" de texto las describe.
    5. 
  

  

    

      
      
    

    

      
/ HTML

      

    

    
    

      
      
      
    

    

  

        

  









  
Diseños responsivos sin escribir un solo media query

  
Hasta ahora definiste un número fijo de columnas. Pero, ¿qué pasa si la pantalla es muy angosta para esas columnas? Grid tiene una combinación de herramientas que resuelve esto solo, sin necesitar @media.


    

    

      

      
      
      
      
      
      

    

    

    


      

        
🤔 El problema de un número fijo de columnas

        

        

          
Si escribís grid-template-columns: repeat(4, 1fr);, SIEMPRE vas a tener 4 columnas, aunque la pantalla sea la de un celular. El resultado: columnas tan angostas que el contenido queda apretado o desbordado.

        

        

          
⚠️ Un número fijo de columnas no sabe "achicarse a menos columnas": por eso, hasta ahora, esto se resolvía con @media para redefinir grid-template-columns según el ancho de pantalla.

        

        

      


      

        
2️⃣ minmax(): un mínimo y un máximo

        

        

          
minmax(mínimo, máximo) le dice a una columna: "no bajes de este ancho, pero tampoco pases de este otro". Entre esos dos límites, la columna se estira o se achica libremente.

        

        


.galeria {
  grid-template-columns: repeat(3, minmax(150px, 1fr));
}

          
💡 Acá cada columna nunca baja de 150px, pero puede crecer hasta 1fr (su parte proporcional) si sobra espacio.

        



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


6 · Completar: minmax()

        
/* Columnas de mínimo 200px, máximo 1fr */
.galeria { grid-template-columns: repeat(3, (200px, 1fr)); }

        
        


        

      

        

      


      

        
🔁 auto-fit y auto-fill

        

        

          
En vez de repeat(3, …), usás repeat(auto-fit, …): le pedís a Grid que calcule solo cuántas columnas entran según el ancho disponible y el minmax() que definiste. Ni una fija.

          
auto-fill hace lo mismo, pero si sobran columnas vacías las deja del mismo tamaño en vez de estirar las existentes para ocupar el espacio.

        

        


.galeria {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

        



        🧩 ¿Lo entendiste? · Arrastrá cada palabra a su definición
        


7 · Arrastrar y soltar: auto-fit vs auto-fill

        
Arrastrá la palabra correcta a cada definición. Hay una palabra trampa.

        

        

          
Estira las columnas existentes para ocupar el espacio sobrante → 

          
Deja columnas vacías del mismo tamaño en vez de estirar → 

        

        
        


        

      

        

      


      

        
⚙️ Vé la responsividad en vivo

        

        

          
Movés el control para simular distintos anchos de pantalla y mirás cómo la cantidad de columnas cambia sola, sin ningún @media en el código.

        

        



    

      
    

    

      

        
1

        
2

        
3

        
4

        
5

        
6

      

    

    

    
El código CSS no cambia nunca: es siempre el mismo repeat(auto-fit, minmax(140px, 1fr)). Lo único que cambia es el ancho disponible.

  

        

        

      


      

        
✅ Repaso rápido

        

        

          
Antes de ver alineación, repasemos diseños responsivos sin media queries.

        

        

          
📱 minmax(min, max) = límites de una columna.
📱 repeat(auto-fit, minmax(…)) = "poné las que entren, sin fijar un número".

        



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


8 · Opción múltiple: responsive sin media queries

        
Elegí una opción por pregunta.

        


        

      

        

      


    

    

      
      

      
    

  




  

        🎯 RETO: hacé que tu galería se adapte sola
        

  
Convertí la galería en una que se acomode sola según el ancho de pantalla, sin ningún media query.

  
    
    
  1. En .galeria, agregá display: grid; y gap: 14px;.
    2. 
    
  2. En la misma clase, agregá grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));.
    3. 
    
  3. Ejecutá y probá reducir el ancho de la ventana de vista previa (o el zoom del navegador): mirá cómo cambia la cantidad de columnas.
    4. 
  

  

    

      
      
    

    

      
/ HTML

      

    

    
    

      
      
      
    

    

  

        

  









  
Alinear contenido dentro (y dentro del total) de la cuadrícula

  
Última pieza: cómo ubicar el contenido DENTRO de cada celda, y cómo ubicar la cuadrícula ENTERA cuando es más chica que su contenedor.


    

    

      

      
      
      
      
      
      

    

    

    


      

        
🧠 align-items y justify-items

        

        

          
Estas dos propiedades van en el CONTENEDOR y controlan dónde se ubica el contenido dentro de cada celda, cuando esa celda es más grande que su contenido. justify-items es horizontal; align-items es vertical.

          
Valores comunes: start, center, end, stretch (el valor por defecto: estira el contenido para llenar la celda).

        

        


.contenedor {
  justify-items: center; /* horizontal, dentro de cada celda */
  align-items: center; /* vertical, dentro de cada celda */
}

        

        

      


      

        
2️⃣ justify-content y align-content

        

        

          
Estas dos son parecidas mirando el nombre, pero hacen algo distinto: ubican la cuadrícula ENTERA dentro de su contenedor, para cuando la suma de columnas/filas es más chica que el espacio disponible.

        

        


.contenedor {
  justify-content: center; /* centra TODO el grid horizontalmente */
}

          
⚠️ Error común: confundir justify-items (adentro de cada celda) con justify-content (la cuadrícula completa dentro del contenedor).

        



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


9 · Opción múltiple: -items vs -content

        
Elegí una opción por pregunta.

        


        

      

        

      


      

        
🔁 place-items y place-content: los atajos

        

        

          
place-items es el atajo que fija align-items y justify-items en una sola línea. place-content hace lo mismo con align-content y justify-content.

        

        


/* Estas dos líneas hacen lo mismo */
.a { align-items: center; justify-items: center; }
.b { place-items: center; }

          
💡 place-items: center; es, probablemente, la forma más rápida de centrar algo perfectamente que existe en CSS.

        

        

      


      

        
⚙️ Vé la alineación en vivo

        

        

          
Elegís valores de justify-items y align-items y mirás cómo se mueve el "chip" celeste dentro de cada celda (más grande que su contenido).

        

        



    

      
      
    

    

      

        
A

        
B

        
C

      

    

    

  

        

        

      


      

        
✅ Repaso general de Grid avanzado

        

        

          
Cerremos la teoría con un repaso que combina las cuatro secciones de este recurso.

        

        

          
⚖️ -items = dentro de cada celda.
⚖️ -content = la cuadrícula entera dentro del contenedor.
⚖️ place- = el atajo de los dos ejes juntos.

        



        ✅ Repaso general · Opción múltiple
        


10 · Opción múltiple: repaso de Grid avanzado

        
Elegí una opción por pregunta.

        


        

      

        

      


    

    

      
      

      
    

  




  

        🎯 RETO: centrá el contenido de tu galería
        

  
Tomá la galería responsiva y centrá el texto de cada tarjeta perfectamente, con un solo atajo.

  
    
    
  1. En .galeria, agregá display: grid;, grid-template-columns: repeat(3, 1fr); y gap: 14px;.
    2. 
    
  2. En la misma clase, agregá place-items: center; para centrar el contenido de cada tarjeta en las dos direcciones.
    3. 
    
  3. Ejecutá y verificá que el texto de cada tarjeta quede perfectamente centrado, tanto horizontal como verticalmente.
    4. 
  

  

    

      
      
    

    

      
/ HTML

      

    

    
    

      
      
      
    

    

  

        

  









  
🚀 Tu turno: armá una página completa y avanzada

  
Combinemos todo lo del Recurso 2: ubicar ítems, grid-template-areas, diseño responsivo y alineación, en una sola página.


  
✅ Tu diseño final debe tener

  

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

  

    
1
🗺️ Armá el layout general con grid-template-areas.

    
2
🎯 Ubicá algún ítem especial con grid-column o span.

    
3
📱 Armá la sección de tarjetas con auto-fit + minmax().

    
4
⚖️ Alineá el contenido con place-items.

    
5
📥 Ejecutá, ajustá y descargá tu página.

  


  

  💻 Tu simulador
  

  
El HTML ya tiene cabecera, menú, una sección de productos y pie: vos armás todo el CSS. Tab inserta 2 espacios.

  
    
    
  1. En .pagina, agregá display: grid;, grid-template-columns: 160px 1fr; y grid-template-areas con "cabecera cabecera", "menu productos" y "pie pie".
    2. 
    
  2. Asignále grid-area a .cabecera, .menu, .productos y .pie.
    3. 
    
  3. En .productos, agregá display: grid;, gap: 12px; y grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); para las tarjetas de adentro.
    4. 
    
  4. En .tarjeta (dentro de productos), hacé que la primera ocupe más espacio con grid-column: span 2;.
    5. 
    
  5. Ejecutá, ajustá los detalles y descargá tu página 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.