Estilos CSS: Layouts con Float, Flexbox y Grid

Maquetar es componer la estructura visual de una página: columnas, rejillas, barras laterales, galerías. Durante años se hizo con herramientas que no se diseñaron para ello —float nació para envolver texto alrededor de imágenes— hasta que llegaron Flexbox y CSS Grid, dos sistemas pensados específicamente para layout. Conocer los tres te permite entender el código heredado y elegir la herramienta correcta para cada problema.

Esta es la cuarta entrega de la serie Estilos CSS. Recorreremos float y la técnica clearfix, el modelo unidimensional de Flexbox y el sistema bidimensional de Grid, con ejemplos que puedes ver renderizados.

Float: el origen y el clearfix

float extrae un elemento del flujo normal y lo desplaza hacia un lado de su contenedor; el contenido adyacente fluye a su alrededor. Ese fue su propósito original: envolver texto alrededor de una imagen.

.imagen { float: left; margin-right: 1em; }

Cuando usas float, necesitas limpiar el flujo para que el contenedor vuelva a comportarse con normalidad. El patrón estándar es el clearfix, implementado con un pseudo-elemento:

.clearfix::before,
.clearfix::after {
  display: table;
  content: " ";
}

.clearfix::after {
  clear: both;
}

Flexbox: layout en una dimensión

Al aplicar display: flex a un contenedor, este se convierte en un flex container y sus hijos en flex items. Flexbox organiza los ítems a lo largo de un eje principal y los alinea en el eje transversal, ajustando tamaños de forma flexible.

Un contenedor flex tiene dos ejes:

• Eje principal (main) — la dirección en la que se colocan los ítems (horizontal por defecto).
• Eje transversal (cross) — perpendicular al principal.

Alinear ítems con justify-content y align-items

• justify-content controla la distribución a lo largo del eje principal: flex-start, flex-end, center, space-between, space-around.
• align-items controla la alineación en el eje transversal: stretch (por defecto), flex-start, flex-end, center, baseline.

.barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Controlar el tamaño: flex-grow, flex-shrink y flex-basis

La propiedad abreviada flex agrupa tres propiedades que gobiernan el tamaño de cada ítem:

• flex-basis — el tamaño base (de partida) del ítem antes de crecer o encoger. Su valor inicial es auto.
• flex-grow — el factor de crecimiento para repartir el espacio sobrante. 0 no crece.
• flex-shrink — el factor de encogimiento cuando falta espacio.

.col-a { flex: 1; }  /* crece para ocupar el espacio sobrante */
.col-b { flex: 2; }  /* crece al doble que col-a */

Dirección y envoltura

• flex-direction cambia el eje principal: row (por defecto), row-reverse, column, column-reverse.
• flex-wrap permite que los ítems salten a una nueva línea cuando no caben: nowrap (por defecto), wrap, wrap-reverse.
• flex-flow es la abreviatura de ambas: flex-flow: row wrap.

Propiedades del ítem

• align-self — sobrescribe align-items para un ítem concreto.
• order — reordena los ítems sin tocar el HTML; el valor inicial es 0.

CSS Grid: layout en dos dimensiones

Mientras Flexbox trabaja en un solo eje, CSS Grid organiza el contenido en filas y columnas simultáneamente. Antes de usarlo conviene fijar su vocabulario:

• Grid line — las líneas que forman la estructura de la rejilla.
• Grid track — el espacio entre dos líneas adyacentes (una fila o una columna).
• Grid cell — la intersección de una fila y una columna.
• Grid area — un rectángulo formado por una o más celdas.

Una rejilla básica

Se activa con display: grid y se definen las pistas con grid-template-columns y grid-template-rows. La unidad fr representa una fracción del espacio disponible.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5em;
}

La función repeat() evita la repetición: grid-template-columns: repeat(3, 1fr) equivale a 1fr 1fr 1fr.

Posicionar ítems por líneas

Cada línea de la rejilla tiene un número. Con grid-column y grid-row indicas dónde empieza y termina un ítem usando la sintaxis inicio / fin:

.destacado {
  grid-column: 1 / 3;  /* abarca de la línea 1 a la 3 */
  grid-row: span 2;    /* abarca dos pistas verticales */
}

Áreas con nombre

La forma más legible de componer un layout es nombrar las áreas con grid-template-areas y asignar cada elemento con grid-area:

.contenedor {
  display: grid;
  grid-template-areas:
    "titulo titulo"
    "nav    nav"
    "main   aside";
  grid-template-columns: 2fr 1fr;
  gap: 1em;
}

header { grid-area: titulo; }
nav    { grid-area: nav; }
.main  { grid-area: main; }
.aside { grid-area: aside; }

Rejilla implícita y galerías responsivas

Cuando no conoces de antemano la cantidad de ítems —por ejemplo, datos que vienen de una API— la rejilla implícita crece automáticamente para acomodarlos. La combinación de auto-fill con minmax() produce galerías que se adaptan al ancho disponible sin media queries:

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

Flexbox y Grid: complementarios, no rivales

No tienes que elegir uno. La combinación más potente es usar Grid para la estructura macro de la página (cabecera, contenido, barra lateral, pie) y Flexbox para alinear el contenido dentro de cada zona (una barra de navegación, una tarjeta, un grupo de botones).

Conclusión

float resuelve el envolvimiento de texto; Flexbox domina el layout en una dimensión y el centrado; Grid organiza estructuras bidimensionales complejas. Elegir la herramienta adecuada para cada problema —y combinarlas— es lo que distingue una maquetación robusta de una llena de parches.