CSS Grid

Alineación y la regla Flexbox vs Grid

Esta última lección del módulo cierra dos temas: la alineación de ítems dentro de su celda, y la regla para decidir cuándo usar Flexbox y cuándo Grid. Con esto completás el toolkit de layout moderno del Bloque III.

justify-self y align-self — alinear el ítem en su celda

justify-self y align-self controlan cómo se posiciona el ítem dentro de su celda (no todo el contenedor):

/* El ítem se centra horizontalmente en su celda */
.item { justify-self: center; }

/* El ítem se alinea al final verticalmente en su celda */
.item { align-self: end; }

/* Valores comunes */
/* start | end | center | stretch (por defecto) */

Ya conocés align-self de Flexbox (CAT-25). En Grid funciona igual pero el “contenedor de alineación” es la celda del ítem, no el eje cruzado del flex container.

Diferencia con las propiedades del contenedor:

/* En el contenedor: aplica a TODOS los ítems */
.grid { justify-items: center; }

/* En el ítem: sobreescribe solo para ESE ítem */
.item-especial { justify-self: end; }

Probalo en el sandbox: creá un grid de 2 columnas y aplicá justify-self: center a uno de los ítems. Observá cómo ese ítem se centra en su celda mientras los demás ocupan todo el ancho disponible (stretch por defecto).

<div class="grid">
  <div class="item">Normal (stretch)</div>
  <div class="item centrado">Centrado</div>
  <div class="item">Normal (stretch)</div>
  <div class="item al-final">Al final</div>
</div>
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.item { background: #e2e8f0; padding: 16px; }
.centrado  { justify-self: center; background: #4f46e5; color: white; }
.al-final  { justify-self: end;    background: #0891b2; color: white; }

El efecto es visual — el punto pedagógico es verlo en el preview.

La regla: cuándo Flexbox, cuándo Grid

Flexbox para una dimensión; Grid para dos.

FlexboxGrid
Quién mandaEl contenido — los ítems definen su tamañoEl layout — el contenedor define la estructura
DimensionesUna (fila O columna)Dos (filas Y columnas)
Caso idealBarra de nav, lista de tags, botones en filaLayout de página, galerías, dashboards
Alineación de filasflex-wrap + align-content (aproximado)Exacta — el grid garantiza el alineado en columna
Flexbox → "¿cómo distribuyo estos ítems en una dirección?"
Grid    → "¿cómo divido este espacio en zonas?"

No son mutuamente excluyentes — se combinan:

Página (Grid para el layout global)
├── Header (Flexbox internamente: logo + nav + acciones)
├── Nav    (Flexbox: lista de links)
├── Main   (puede tener un sub-Grid para tarjetas)
└── Footer (Flexbox: copyright + links + redes)

Grid define la estructura de la página; Flexbox distribuye el contenido dentro de cada zona. Este es el patrón estándar de producción.

Cuándo preferir Flexbox aunque puedas usar Grid:

  • La cantidad de ítems es dinámica (no sabés cuántos habrá).
  • El layout debe adaptarse al tamaño del contenido (no al revés).
  • Solo necesitás controlar una dimensión.

Cuándo preferir Grid aunque puedas usar Flexbox:

  • Necesitás que ítems en distintas filas estén alineados en columna.
  • El layout tiene zonas bien definidas (header/nav/main/footer).
  • Querés control bidimensional preciso.

Cierre del Bloque III — toolkit completo

Tenés las cuatro herramientas de layout moderno:

HerramientaQué resuelve
Flujo normal (CAT-23)El default — el navegador organiza
Positioning (CAT-24)Casos específicos: navbars sticky, modales, tooltips
Flexbox (CAT-25)Una dimensión: navbars, listas, tarjetas en fila
Grid (CAT-26)Dos dimensiones: layouts de página, galerías, dashboards

Cualquier layout de producción se construye combinando estas cuatro herramientas.

Qué viene en el Bloque IV

El Bloque III enseñó cómo disponer. El Bloque IV enseña cómo hacerlo bien en todos los tamaños y en el tiempo:

  • CAT-27 (Responsive): repeat(auto-fit, minmax()) ya da responsive sin media queries; con @media controlás los puntos de quiebre explícitos.
  • CAT-28 (Custom properties): centralizás valores de gap, tamaños de pista y colores con variables CSS.
  • CAT-29 (Transitions): agregás movimiento suave a cambios de estado en el layout.

CAT-26 es el momento en que terminaste de construir tu caja de herramientas de layout. El Bloque IV la lleva a condiciones reales: pantallas de distintos tamaños, mantenibilidad y movimiento.

Sandbox libre — probá lo que aprendiste:

Preview

En la referencia