CSS: Flexbox y Grid

El diseño web moderno requiere herramientas eficientes y flexibles para crear interfaces responsivas y bien estructuradas. CSS 3 introduce dos módulos fundamentales para este propósito: Flexbox y Grid. Ambos proporcionan métodos robustos para controlar la disposición de los elementos en una página web, facilitando la creación de diseños complejos y adaptativos. A continuación, se detallan sus características y formas de uso.

Flexbox

El módulo Flexbox (Flexible Box Layout) está diseñado para distribuir el espacio entre los elementos de un contenedor y mejorar la alineación de los mismos. Es especialmente útil para diseños unidimensionales, ya que permite controlar la disposición en una sola dirección, ya sea horizontal o vertical.

Propiedades principales

1. display: flex;
   Activa Flexbox en un contenedor. Todos los elementos hijos se convierten en elementos flexibles.

2. flex-direction:
   Define la dirección en la que se distribuyen los elementos flexibles. Valores comunes:

• row (predeterminado): Elementos dispuestos en una fila.
• column: Elementos dispuestos en una columna.

3. justify-content:
   Alinea los elementos flexibles a lo largo del eje principal. Valores comunes:

• flex-start: Alinea los elementos al inicio del contenedor.
• center: Alinea los elementos al centro del contenedor.
• space-between: Distribuye los elementos con espacio igual entre ellos.

4. align-items:
   Alinea los elementos flexibles a lo largo del eje transversal. Valores comunes:

• stretch (predeterminado): Estira los elementos para llenar el contenedor.
• center: Alinea los elementos en el centro del contenedor.

Ejemplo de uso

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

<div class="container">
  <div class="item">Elemento 1</div>
  <div class="item">Elemento 2</div>
  <div class="item">Elemento 3</div>
</div>

Grid

El módulo Grid Layout es más adecuado para diseños bidimensionales, ya que permite controlar tanto filas como columnas. Es ideal para crear estructuras de diseño complejas y adaptativas.

Propiedades principales

1. display: grid;
   Activa Grid en un contenedor. Todos los elementos hijos se convierten en elementos de la cuadrícula.

2. grid-template-columns:
   Define el número y tamaño de las columnas en la cuadrícula. Ejemplo:

   grid-template-columns: 1fr 2fr;

Esto crea dos columnas, la primera ocupando un espacio flexible y la segunda el doble de espacio.

3. grid-template-rows:
   Define el número y tamaño de las filas en la cuadrícula. Ejemplo:

   grid-template-rows: auto 100px;

Esto crea dos filas, la primera con altura automática y la segunda con una altura fija de 100px.

4. gap:
   Define el espacio entre las filas y columnas. Ejemplo:

   gap: 10px;

Ejemplo de uso

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto 100px;
  gap: 10px;
}

<div class="container">
  <div class="item">Elemento 1</div>
  <div class="item">Elemento 2</div>
  <div class="item">Elemento 3</div>
  <div class="item">Elemento 4</div>
</div>

Flexbox y Grid en CSS 3 son herramientas esenciales para cualquier desarrollador web que busque crear interfaces modernas y responsivas. El uso adecuado de estas tecnologías puede simplificar enormemente el proceso de diseño y mejorar la experiencia del usuario en la web.