Sistema de rejillas (Grid System)

El sistema de rejillas de Bootstrap 5 es una herramienta fundamental para diseñar páginas web responsivas y organizadas. Permite dividir el contenido en filas y columnas, facilitando la alineación y el diseño consistente de los elementos en cualquier dispositivo.

1. Conceptos básicos del sistema de rejillas

El sistema de rejillas de Bootstrap se basa en las siguientes características clave:

a) División de columnas

• Bootstrap divide el espacio horizontal en 12 columnas iguales dentro de cada fila.
• Puedes especificar cuántas columnas debe ocupar un elemento para crear diferentes tamaños de diseño.

b) Filas (.row)

• Las filas agrupan las columnas y garantizan un espaciado uniforme.
• Siempre se deben envolver las columnas dentro de filas para que el sistema funcione correctamente.

c) Contenedores (.container y .container-fluid)

• .container: Con un ancho máximo fijo y centrado automáticamente.
• .container-fluid: Ocupa el ancho completo de la pantalla.

Ejemplo básico:

<div class="container">
  <div class="row">
    <div class="col-6 bg-light p-3">Columna 1</div>
    <div class="col-6 bg-secondary text-white p-3">Columna 2</div>
  </div>
</div>

En este ejemplo:

• .col-6: Cada columna ocupa 6 de las 12 unidades disponibles (50% del ancho total).

2. Breakpoints y diseño responsivo

Los breakpoints permiten adaptar el diseño al tamaño del dispositivo. Bootstrap incluye los siguientes puntos de interrupción:

Ejemplo de diseño responsivo:

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-md-4 bg-light p-3">Columna 1</div>
    <div class="col-12 col-sm-6 col-md-4 bg-secondary text-white p-3">Columna 2</div>
    <div class="col-12 col-md-4 bg-light p-3">Columna 3</div>
  </div>
</div>

• col-12: La columna ocupa todo el ancho en dispositivos extra pequeños.
• col-sm-6: Ocupa la mitad del ancho en dispositivos pequeños.
• col-md-4: Ocupa un tercio del ancho en dispositivos medianos o mayores.

3. Rejillas anidadas

Las rejillas anidadas permiten colocar rejillas dentro de columnas existentes. Esto es útil para crear subestructuras dentro de una página.

Ejemplo de rejillas anidadas:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 bg-light p-3">
      <h3>Columna Principal</h3>
      <div class="row">
        <div class="col-6 bg-secondary text-white p-2">Subcolumna 1</div>
        <div class="col-6 bg-light p-2">Subcolumna 2</div>
      </div>
    </div>
    <div class="col-12 col-md-6 bg-secondary text-white p-3">Columna Principal</div>
  </div>
</div>

En este ejemplo:

• Las subcolumnas dentro de col-md-6 se dividen en dos mitades iguales gracias a otra fila.

4. Ejemplos prácticos de diseño de páginas

Diseño básico con cabecera, contenido y pie de página

<div class="container">
  <!-- Cabecera -->
  <header class="row bg-primary text-white py-3">
    <div class="col text-center">
      <h1>Mi Página Web</h1>
    </div>
  </header>

  <!-- Contenido principal -->
  <main class="row my-4">
    <!-- Barra lateral -->
    <aside class="col-12 col-md-4 bg-light p-3">
      <h2>Barra Lateral</h2>
      <p>Este es un ejemplo de una barra lateral con contenido.</p>
    </aside>
    <!-- Área de contenido -->
    <section class="col-12 col-md-8 bg-secondary text-white p-3">
      <h2>Contenido Principal</h2>
      <p>Aquí va el contenido principal de la página.</p>
    </section>
  </main>

  <!-- Pie de página -->
  <footer class="row bg-dark text-white py-3">
    <div class="col text-center">
      <p>© 2024 Mi Página Web</p>
    </div>
  </footer>
</div>

Resumen

El sistema de rejillas de Bootstrap 5 es una herramienta poderosa y flexible para crear diseños responsivos. Gracias a los contenedores, filas y columnas, junto con los breakpoints y la posibilidad de anidar rejillas, es posible diseñar páginas web adaptadas a cualquier dispositivo de manera eficiente y profesional. Con práctica, este sistema se convierte en una pieza esencial para cualquier desarrollador web.