Cheat Sheet Visual de CSS Grid y Flexbox — La Guía que Siempre Busco

Cada vez que necesito hacer un layout con Grid o Flexbox, acabo buscando en Google lo mismo: “css grid center item”, “flexbox space between”, “grid auto-fill vs auto-fit”…

Así que me hice esta referencia visual para dejar de buscar las mismas cosas una y otra vez. La comparto porque seguro que tú también lo buscas.

Flexbox — Referencia completa

El contenedor (parent)

.flex-container {
  display: flex;

  /* Dirección del eje principal */
  flex-direction: row;            /* → (default) */
  flex-direction: row-reverse;    /* ← */
  flex-direction: column;         /* ↓ */
  flex-direction: column-reverse; /* ↑ */

  /* ¿Se ajustan a varias líneas? */
  flex-wrap: nowrap;   /* Todo en una línea (default) */
  flex-wrap: wrap;     /* Saltan de línea si no caben */

  /* Alineación en el eje principal (horizontal si row) */
  justify-content: flex-start;    /* |■ ■ ■         | */
  justify-content: flex-end;      /* |         ■ ■ ■| */
  justify-content: center;        /* |    ■ ■ ■     | */
  justify-content: space-between; /* |■    ■    ■   | */
  justify-content: space-around;  /* | ■   ■   ■  | */
  justify-content: space-evenly;  /* |  ■  ■  ■  | */

  /* Alineación en el eje cruzado (vertical si row) */
  align-items: stretch;    /* Los items se estiran (default) */
  align-items: flex-start; /* Arriba */
  align-items: flex-end;   /* Abajo */
  align-items: center;     /* Centro vertical */
  align-items: baseline;   /* Alinea por la línea base del texto */

  /* Espacio entre elementos (moderno, funciona en Flex y Grid) */
  gap: 1rem;
  row-gap: 1rem;
  column-gap: 2rem;
}

Los items (children)

.flex-item {
  /* Cuánto crece el item si hay espacio extra */
  flex-grow: 0;   /* No crece (default) */
  flex-grow: 1;   /* Ocupa todo el espacio disponible */

  /* Cuánto se encoge si no hay espacio */
  flex-shrink: 1; /* Se encoge proporcionalmente (default) */
  flex-shrink: 0; /* NO se encoge — mantiene su tamaño */

  /* Tamaño base antes de crecer/encoger */
  flex-basis: auto;  /* Usa el width del elemento (default) */
  flex-basis: 200px; /* Empieza en 200px */
  flex-basis: 0;     /* Ignora el contenido, distribuye solo por grow */

  /* Shorthand (el que siempre uso) */
  flex: 1;           /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
  flex: 0 0 200px;   /* No crece, no encoge, 200px fijo */

  /* Alineación individual (override del align-items del padre) */
  align-self: center;
  align-self: flex-start;
  align-self: flex-end;
  align-self: stretch;

  /* Orden visual */
  order: 0;  /* Default */
  order: -1; /* Se mueve al principio */
  order: 1;  /* Se mueve al final */
}

Los 5 patrones Flexbox que más uso

1. Centrar algo (el clásico)

.center-everything {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Tailwind: flex items-center justify-center */

Me pasé 3 años usando margin: 0 auto + line-height hacks. Ojalá alguien me hubiera dicho esto antes.

2. Navbar con logo a la izquierda y links a la derecha

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* Tailwind: flex items-center justify-between */

3. Cards en fila que saltan de línea

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card {
  flex: 1 1 300px; /* Mínimo 300px, crece para rellenar */
}
/* Tailwind: flex flex-wrap gap-4; child: flex-1 basis-[300px] */

4. Sidebar fija + contenido flexible

.layout {
  display: flex;
}
.sidebar {
  flex: 0 0 280px; /* Fija a 280px */
}
.content {
  flex: 1; /* Ocupa el resto */
}
/* Tailwind: flex; sidebar: w-[280px] shrink-0; content: flex-1 */

5. Footer que siempre está abajo (sticky footer)

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1; /* Empuja el footer abajo */
}
/* Tailwind: flex flex-col min-h-screen; main: flex-1 */

---

CSS Grid — Referencia completa

El contenedor (parent)

.grid-container {
  display: grid;

  /* Definir columnas */
  grid-template-columns: 200px 1fr 200px;      /* Sidebar | Content | Sidebar */
  grid-template-columns: repeat(3, 1fr);        /* 3 columnas iguales */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Responsive sin media queries */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  /* Idem, pero estira si sobra espacio */

  /* Definir filas */
  grid-template-rows: auto 1fr auto;            /* Header | Content | Footer */
  grid-auto-rows: minmax(100px, auto);          /* Filas implícitas: mínimo 100px */

  /* Espacio entre celdas */
  gap: 1rem;
  row-gap: 1.5rem;
  column-gap: 1rem;

  /* Alinear TODO el contenido del grid */
  justify-items: stretch;  /* Los items se estiran horizontalmente (default) */
  justify-items: center;   /* Centrado horizontal */
  align-items: stretch;    /* Los items se estiran verticalmente (default) */
  align-items: center;     /* Centrado vertical */

  /* Alinear el grid dentro de su contenedor */
  justify-content: center;        /* Grid centrado horizontalmente */
  align-content: center;          /* Grid centrado verticalmente */
  place-content: center;          /* Shorthand: ambos a la vez */
}

Los items (children)

.grid-item {
  /* Posicionamiento por línea (empieza en 1, no en 0) */
  grid-column: 1 / 3;      /* Ocupa de la línea 1 a la 3 (2 columnas) */
  grid-column: 1 / -1;     /* De la primera a la última línea (full width) */
  grid-column: span 2;     /* Ocupa 2 columnas desde donde esté */
  grid-row: 1 / 3;         /* Ocupa 2 filas */

  /* Alineación individual */
  justify-self: center;    /* Centrado horizontal en su celda */
  align-self: center;      /* Centrado vertical en su celda */
  place-self: center;      /* Shorthand: ambos */
}

Los 5 patrones Grid que más uso

1. Grid responsive sin media queries

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
/* Tailwind: grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-6 */
/* O más simple: grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 */

Este es el patrón que uso para el 90% de grids. auto-fit + minmax() = las columnas se ajustan solas. Si caben 3, hay 3. Si solo caben 2, hay 2. Sin una sola media query.

auto-fill vs auto-fit: auto-fill crea columnas vacías si sobra espacio. auto-fit estira las existentes. Para cards, siempre auto-fit.

2. Layout de página completa (Holy Grail)

.page-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

grid-template-areas es pura magia. Puedes leer el layout como si fuera un dibujo ASCII.

3. Galería tipo Pinterest (Masonry)

.masonry {
  columns: 3;
  column-gap: 1rem;
}
.masonry-item {
  break-inside: avoid;
  margin-bottom: 1rem;
}
/* Nota: esto es CSS Columns, no Grid. Pero lo incluyo porque
   siempre lo busco como "css grid masonry". Grid masonry real
   con grid-template-rows: masonry ya funciona en Firefox. */

4. Item que ocupa todo el ancho

.full-width-item {
  grid-column: 1 / -1; /* De la primera a la última línea */
}
/* Tailwind: col-span-full */

5. Centrar un item en el grid

.centered-grid {
  display: grid;
  place-items: center;
  min-height: 100vh;
}
/* Tailwind: grid place-items-center min-h-screen */

Sí, place-items: center en Grid es otra forma de centrar. Más limpio que Flex para centrar un solo elemento.

---

Cuándo uso cada uno — Mi regla personal

Situación	Elijo	Por qué
Navbar	Flexbox	Una sola fila, space-between
Grid de cards	Grid	Necesito columnas responsive
Formulario	Grid	2 columnas de inputs alineados
Centrar un div	Grid	place-items: center es una línea
Sidebar + content	Grid	2 columnas con anchos distintos
Botones en fila	Flexbox	Una fila con gap
Dashboard completo	Grid	Filas Y columnas con areas
Lista vertical	Flexbox	flex-direction: column con gap

La regla que me sirve: si solo necesito una dirección → Flexbox. Si necesito filas Y columnas → Grid. Cuando dudo, empiezo con Grid porque es más potente y después simplifico a Flexbox si resulta que no necesitaba tanto.

---

Propiedades nuevas de CSS que uso (2025-2026)

Container Queries

.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    flex-direction: row; /* Horizontal si el contenedor es ancho */
  }
}
/* Tailwind: @container, @md:flex-row */

Los container queries responden al tamaño del contenedor padre, no del viewport. Perfectos para componentes reutilizables.

Subgrid

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.child {
  grid-column: span 3;
  display: grid;
  grid-template-columns: subgrid; /* Hereda las columnas del padre */
}

subgrid permite que un hijo herede las líneas del grid del padre. Ideal para alinear contenido dentro de cards en un grid.

---

Tip final

Cuando me pierdo con un layout, abro las DevTools del navegador (F12), selecciono el elemento, y activo el Grid/Flex overlay (en Chrome: Layout panel → Grid overlays). Te dibuja las líneas, las areas, y los gaps en pantalla. Es la mejor forma de debuggear layouts.

Artículos relacionados

• 10 Landing Pages con Tailwind CSS (código completo) — estos layouts aplicados a diseños reales
• Cómo hice mi portfolio con Vite y Tailwind — layout real con Flexbox y Grid