📦 1.6 · Flexbox y Grid: layouts profesionales con CSS

🎯 Objetivo del tema

🗺️ Mapa del tema

Durante años, hacer layouts en CSS fue un infierno de floats, clears, y position: absolute. Todo cambió en 2017 con Flexbox, y en 2018 con CSS Grid. Hoy son las dos herramientas que todo desarrollador web debe dominar. En este tema vas a aprender ambas, sus diferencias, y cuándo usar cada una.

1.6.1 Por qué Flexbox y Grid reemplazaron a float

Antes de 2017, hacer un layout era una pesadilla. La única herramienta de CSS pensada originalmente para layout era float, que en realidad fue diseñada para que el texto rodeara imágenes. El resultado: hacks, clearfix, position: absolute para todo, y un mareo constante de '¿por qué esto no se alinea?'.

El pasado (float-based layout)

/* El 'código clásico' para centrar algo verticalmente, antes de 2017 */
.parent {
  position: relative;
  height: 300px;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
/* ¿Por qué tanta complicación? Porque float no servía para esto. */

Hacking con position: absolute

El presente (Flexbox y Grid)

/* Con Flexbox: 3 líneas y listo */
.parent {
  display: flex;
  align-items: center;
}
/* Eso es TODO. Sin position, sin transform, sin hacks. */

Centrado vertical con Flexbox

1.6.2 Flexbox: el patrón unidimensional

Flexbox organiza elementos en UNA dimensión: o en una fila, o en una columna. Es perfecto para barras de navegación, listas de tarjetas, alineación de botones, distribución de espacio sobrante. La idea central: tienes un CONTENEDOR flex y unos ÍTEMS flex.

El ejemplo más simple: una barra de navegación

<nav class="navbar">
  <a href="/" class="logo">Mi sitio</a>
  <ul class="menu">
    <li><a href="/blog">Blog</a></li>
    <li><a href="/proyectos">Proyectos</a></li>
    <li><a href="/contacto">Contacto</a></li>
  </ul>
</nav>

<style>
.navbar {
  display: flex;                /* activa flexbox */
  justify-content: space-between;  /* logo a la izq, menú a la der */
  align-items: center;          /* alineados verticalmente */
  padding: 1rem 2rem;
}

.menu {
  display: flex;                /* menú también es flex */
  gap: 1.5rem;                  /* espacio entre items */
  list-style: none;
}
</style>

Barra de navegación con Flexbox

1.6.3 Las 6 propiedades del contenedor flex

El contenedor flex (el padre con display: flex) tiene 6 propiedades que controlan cómo se distribuyen los hijos. Las 3 primeras controlan la dirección y el flujo; las 3 siguientes, la alineación.

justify-content: el más usado

.contenedor {
  display: flex;
  justify-content: space-between;  /* más común: empuja el primero a la izq y el último a la der */
}

/* Otros valores útiles: */
/* flex-start:     todos pegados al inicio */
/* center:         todos centrados */
/* space-around:   espacio igual alrededor de cada uno */
/* space-evenly:   espacio igual ENTRE todos (incluyendo los bordes) */

justify-content: space-between

1.6.4 Propiedades de los ítems flex

Además de las propiedades del contenedor, cada ÍTEM flex puede tener sus propias propiedades. Las 3 más importantes forman el atajo 'flex', que controla cómo crece, encoge y cuál es su tamaño base.

El patrón 'tres columnas iguales'

.contenedor {
  display: flex;
  gap: 1rem;
}
.columna {
  flex: 1;  /* las 3 crecen igual y ocupan el mismo ancho */
}

<!-- HTML -->
<div class="contenedor">
  <div class="columna">Columna 1</div>
  <div class="columna">Columna 2</div>
  <div class="columna">Columna 3</div>
</div>

/* flex: 1 es el atajo más usado de TODO Flexbox. */

Tres columnas iguales con flex: 1

1.6.5 CSS Grid: el patrón bidimensional

Grid organiza elementos en DOS dimensiones: filas Y columnas al mismo tiempo. Es perfecto para layouts de página completos, galerías de productos, dashboards, y cualquier diseño donde necesites controlar 'este elemento está en la fila 2 columna 3'.

El ejemplo: layout de página típico

body {
  display: grid;
  grid-template-columns: 250px 1fr;       /* sidebar fijo, contenido flexible */
  grid-template-rows: auto 1fr auto;        /* header, main, footer */
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
  gap: 1rem;
}

header  { grid-area: header; }
aside   { grid-area: sidebar; }
main    { grid-area: main; }
footer  { grid-area: footer; }

Layout de página con Grid areas

El atajo definitivo: repeat() + fr

/* 12 columnas iguales: el clásico de Bootstrap y frameworks */
.contenedor {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}
.col-6  { grid-column: span 6; }  /* ocupa 6 de 12 = mitad */
.col-4  { grid-column: span 4; }  /* ocupa 4 de 12 = un tercio */
.col-3  { grid-column: span 3; }  /* ocupa 3 de 12 = un cuarto */

Grid de 12 columnas con repeat()

Unidad fr: la más poderosa de Grid

La unidad fr (fracción) reparte el espacio disponible en proporciones. grid-template-columns: 1fr 2fr 1fr crea 3 columnas donde la del medio es el DOBLE de las otras. Es mucho más fácil que calcular porcentajes.

1.6.6 Cuándo usar Flexbox vs Grid

La confusión más común: ¿uso Flexbox o Grid para esto? La regla práctica es sencilla, aunque hay matices. Y la mejor noticia: puedes combinarlos sin problemas.

Combinados: Grid para el macro, Flexbox para el micro

Lo profesional es combinarlos. Por ejemplo: Grid para el layout general de la página (header, sidebar, main, footer), y Flexbox dentro de cada zona (la barra de navegación dentro del header, las tarjetas dentro de main, los botones dentro de una tarjeta). Cada herramienta en su nivel.

📚 Contenido ampliado

Material adicional, referencias externas verificadas y ejemplos extendidos.