1. ¿Qué es un Column Layout?

Un column layout (diseño en columnas) distribuye el contenido horizontalmente en una o más columnas paralelas. Se utiliza para:

• Diseños de blogs y artículos.
• Tablas de precios o comparativas.
• Distribución de tarjetas (cards) en galerías.

El objetivo es lograr una presentación clara, responsiva y accesible sin depender de tablas HTML.

2. Técnicas para crear columnas

A lo largo de los años, CSS ha evolucionado. A continuación, una tabla comparativa (máximo dos columnas) que muestra cuándo usar cada técnica.

Conclusión: Flexbox y Grid son preferibles para diseños responsivos y con alineación precisa; las técnicas clásicas pueden servir para casos muy simples o para compatibilidad con navegadores muy antiguos.

3. Flexbox: columnas fluidas y alineación sencilla

/* Contenedor flex */
.flex-columns {
  display: flex;
  flex-wrap: wrap;           /* Permite que las columnas bajen en pantallas pequeñas */
  gap: 1.5rem;               /* Espaciado entre columnas */
}
/* Cada columna */
.flex-columns > .col {
  flex: 1 1 calc(33.333% - 1rem); /* 3 columnas en escritorio */
  min-width: 250px;               /* Evita columnas demasiado estrechas */
}

Ejemplo de uso:

<div class="flex-columns">
  <div class="col">Contenido 1</div>
  <div class="col">Contenido 2</div>
  <div class="col">Contenido 3</div>
</div>

Ventajas:

• Distribución automática del espacio disponible.
• Control fácil de alineación vertical (align-items).
• Gran compatibilidad (IE11 con prefijos).

4. CSS Grid: el estándar para diseños en columnas y filas

/* Contenedor grid */
.grid-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

Ejemplo de uso:

<section class="grid-columns">
  <article>Tarjeta A</article>
  <article>Tarjeta B</article>
  <article>Tarjeta C</article>
  <article>Tarjeta D</article>
</section>

Características clave:

• auto-fit / auto-fill permite que el número de columnas sea dinámico según el ancho del viewport.
• Posicionamiento explícito con grid-column y grid-row para casos de columnas de ancho variable.
• Soporte nativo en todos los navegadores modernos (Chrome, Edge, Firefox, Safari).

5. Propiedad column-count – columnas de texto estilo periódico

.multi-column {
  column-count: 3;       /* Número de columnas */
  column-gap: 2rem;      /* Espacio entre columnas */
  column-rule: 1px solid #ddd; /* Línea divisoria opcional */
}

Ideal para artículos largos donde el texto debe fluir como en una revista.

<article class="multi-column">
  Lorem ipsum dolor sit amet, ... (texto largo)
</article>

Limitaciones:

• Sin control de alineación vertical entre columnas.
• El contenido se corta automáticamente; no adecuado para bloques heterogéneos (imágenes, tarjetas).

6. Rendimiento, compatibilidad y escalabilidad

En pruebas de carga (Chrome Lighthouse) se observó lo siguiente:

Recomendación:

• Usa Flexbox para layouts lineales y alineación de componentes.
• Escoge CSS Grid cuando necesites una cuadrícula completa con filas y columnas explícitas.
• Reserva column-count para artículos de texto largo.

7. Buenas prácticas y solución de problemas

7.1. Evita overflow inesperado

/* Asegura que los hijos no excedan el contenedor */
.container > * {
  min-width: 0;   /* necesario para Flexbox/Grid */
}

7.2. Usa unidades relativas

Prefiere fr, minmax() y clamp() para que el layout se adapte a cualquier ancho de pantalla.

7.3. Accesibilidad

• Orden lógico del DOM: el contenido debe leerse en el mismo orden que se muestra visualmente.
• Añade role="region" y aria‑label a secciones importantes.

8. Integrando Column Layout con Bootstrap 5

Bootstrap ya incluye utilidades de grid (.row .col) y flex (.d-flex). Puedes combinar ambas para casos híbridos:

<div class="container">
  <div class="row g-4">
    <div class="col-12 col-md-6 col-lg-4">Tarjeta 1</div>
    <div class="col-12 col-md-6 col-lg-4">Tarjeta 2</div>
    <div class="col-12 col-lg-4">Tarjeta 3</div>
  </div>
</div>

Esta solución aprovecha el breakpoint system de Bootstrap y evita escribir CSS personalizado cuando no es necesario.