Grid CSS en Bootstrap

Fundamentos de CSS Grid en Bootstrap

Bootstrap ha incorporado soporte nativo para CSS Grid como complemento a su sistema de grid tradicional basado en flexbox. Mientras que el sistema grid clásico de Bootstrap es excelente para layouts unidimensionales (filas y columnas), CSS Grid ofrece control bidimensional completo, permitiendo posicionar elementos tanto en filas como en columnas simultáneamente.

¿Qué es CSS Grid y por qué en Bootstrap?

CSS Grid es un sistema de layout nativo del navegador diseñado específicamente para crear layouts complejos de forma intuitiva. A diferencia del sistema grid tradicional de Bootstrap que funciona con contenedores .container, filas .row y columnas .col-*, CSS Grid permite definir una cuadrícula completa donde cada elemento puede ocupar cualquier área específica.

Bootstrap incorpora utilidades para CSS Grid porque reconoce que ciertos layouts son más naturales con este sistema:

• Layouts de dashboard con paneles en posiciones específicas
• Galerías de imágenes con elementos de diferentes tamaños
• Interfaces complejas donde los elementos no siguen un flujo lineal tradicional

Habilitando CSS Grid: la clase .d-grid

Para comenzar a usar CSS Grid en Bootstrap, aplicamos la clase .d-grid a cualquier elemento contenedor. Esta clase equivale a display: grid en CSS puro:

<div class="d-grid">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
  <div>Elemento 3</div>
</div>

Una vez que un contenedor tiene .d-grid, sus elementos hijos se convierten en grid items que podemos posicionar usando las utilidades específicas de Bootstrap.

Definiendo la estructura: columnas y filas

A diferencia del sistema grid tradicional, donde las columnas están predefinidas (12 columnas), CSS Grid nos permite definir exactamente cuántas columnas y filas necesitamos usando CSS personalizado junto con las clases de Bootstrap:

<div class="d-grid" style="grid-template-columns: repeat(3, 1fr); gap: 1rem;">
  <div class="bg-primary text-white p-3">Item 1</div>
  <div class="bg-secondary text-white p-3">Item 2</div>
  <div class="bg-success text-white p-3">Item 3</div>
</div>

En este ejemplo creamos una cuadrícula de 3 columnas de igual tamaño usando grid-template-columns: repeat(3, 1fr). El gap: 1rem proporciona espaciado uniforme entre elementos.

Utilidades de posicionamiento: .g-col- y .g-start-

Bootstrap proporciona utilidades específicas para posicionar elementos dentro de la cuadrícula:

Utilidad .g-col-*

La clase .g-col-X define cuántas columnas debe ocupar un elemento:

<div class="d-grid" style="grid-template-columns: repeat(4, 1fr); gap: 0.5rem;">
  <div class="g-col-2 bg-primary text-white p-2">Ocupa 2 columnas</div>
  <div class="g-col-1 bg-secondary text-white p-2">1 col</div>
  <div class="g-col-1 bg-success text-white p-2">1 col</div>
</div>

Utilidad .g-start-*

La clase .g-start-X define en qué columna debe comenzar un elemento:

<div class="d-grid" style="grid-template-columns: repeat(4, 1fr); gap: 0.5rem;">
  <div class="g-col-2 g-start-2 bg-warning text-dark p-2">
    Comienza en columna 2, ocupa 2 columnas
  </div>
  <div class="g-col-1 bg-info text-white p-2">Elemento normal</div>
</div>

Diferencias clave con el sistema grid tradicional

La siguiente comparación ilustra las diferencias fundamentales entre ambos sistemas:

Sistema Grid Tradicional (Flexbox):

<div class="container">
  <div class="row">
    <div class="col-md-4">Columna 1</div>
    <div class="col-md-4">Columna 2</div>
    <div class="col-md-4">Columna 3</div>
  </div>
  <div class="row">
    <div class="col-md-6">Columna 4</div>
    <div class="col-md-6">Columna 5</div>
  </div>
</div>

CSS Grid:

<div class="d-grid" style="grid-template-columns: repeat(3, 1fr); gap: 1rem;">
  <div class="bg-light p-3">Elemento 1</div>
  <div class="bg-light p-3">Elemento 2</div>
  <div class="bg-light p-3">Elemento 3</div>
  <div class="g-col-2 bg-light p-3">Elemento 4 (2 columnas)</div>
  <div class="bg-light p-3">Elemento 5</div>
</div>

Cuándo usar cada sistema

Usa el sistema grid tradicional cuando:

• Necesites layouts responsivos estándar (mobile-first)
• El contenido fluye naturalmente de izquierda a derecha, arriba a abajo
• Requieras la máxima compatibilidad con código existente
• Los breakpoints predefinidos cubran tus necesidades

Usa CSS Grid cuando:

• Necesites control preciso sobre la posición de elementos específicos
• Tengas layouts que no siguen un flujo lineal tradicional
• Quieras superponer elementos o crear diseños complejos
• El contenido tenga relaciones bidimensionales claras

Ventajas del control bidimensional

CSS Grid destaca cuando necesitamos que los elementos se relacionen tanto horizontalmente como verticalmente. Por ejemplo, crear un layout tipo dashboard donde un panel lateral se extienda por múltiples filas:

<div class="d-grid" style="grid-template-columns: 250px 1fr; grid-template-rows: auto 1fr auto; height: 100vh; gap: 1rem;">
  <header class="g-col-2 bg-primary text-white p-3">Header</header>
  <aside class="bg-light p-3">Sidebar</aside>
  <main class="bg-white p-3">Contenido principal</main>
  <footer class="g-col-2 bg-dark text-white p-3">Footer</footer>
</div>

Este layout sería considerablemente más complejo de lograr con el sistema grid tradicional, ya que requeriría múltiples contenedores y filas anidadas.

Integración con utilidades existentes

Las utilidades CSS Grid de Bootstrap se integran perfectamente con todas las utilidades existentes que ya conoces:

<div class="d-grid" style="grid-template-columns: repeat(2, 1fr); gap: 1rem;">
  <div class="g-col-1 bg-primary text-white p-3 rounded shadow">
    Card con utilidades
  </div>
  <div class="g-col-1 bg-secondary text-white p-3 rounded shadow">
    Otra card
  </div>
</div>

Esta compatibilidad completa permite que CSS Grid funcione como una extensión natural del ecosistema Bootstrap, no como un reemplazo del sistema existente.

Utilidades de grid y posicionamiento

Más allá de las utilidades básicas .d-grid, .g-col- y .g-start- que establecen los fundamentos, Bootstrap proporciona un conjunto completo de utilidades para el posicionamiento preciso de elementos dentro de cuadrículas CSS Grid. Estas utilidades nos permiten crear layouts complejos manteniendo la consistencia del framework.

Utilidades avanzadas de columnas

Las utilidades de columnas van más allá del simple .g-col-X. Bootstrap incluye variaciones responsive que permiten diferentes comportamientos según el tamaño de pantalla:

<div class="d-grid" style="grid-template-columns: repeat(6, 1fr); gap: 1rem;">
  <div class="g-col-6 g-col-md-4 g-col-lg-2 bg-primary text-white p-2">
    Responsive: 6 cols móvil, 4 tablet, 2 desktop
  </div>
  <div class="g-col-3 g-col-md-2 g-col-lg-1 bg-secondary text-white p-2">
    3-2-1 columnas
  </div>
</div>

Esta progresión responsive permite que los elementos se adapten naturalmente a diferentes tamaños de pantalla sin necesidad de media queries personalizados.

Posicionamiento inicial con .g-start-

Las utilidades .g-start- también incluyen variaciones responsive para control preciso del posicionamiento inicial:

<div class="d-grid" style="grid-template-columns: repeat(6, 1fr); gap: 0.5rem;">
  <div class="g-col-2 g-start-1 g-start-md-2 g-start-lg-3 bg-warning text-dark p-2">
    Posición inicial cambia según breakpoint
  </div>
  <div class="g-col-2 bg-info text-white p-2">Elemento fijo</div>
</div>

Este elemento comenzará en la columna 1 en móvil, columna 2 en tablet, y columna 3 en desktop, permitiendo reposicionamientos dinámicos sin JavaScript.

Control de espaciado con gap

Bootstrap proporciona utilidades específicas para el espaciado entre elementos grid usando la propiedad gap. Aunque frecuentemente aplicamos gap mediante CSS inline, podemos crear clases personalizadas siguiendo las convenciones de Bootstrap:

<div class="d-grid" style="grid-template-columns: repeat(4, 1fr); gap: 2rem;">
  <div class="bg-success text-white p-3">Gap grande</div>
  <div class="bg-success text-white p-3">Entre elementos</div>
  <div class="bg-success text-white p-3">Uniformemente</div>
  <div class="bg-success text-white p-3">Distribuido</div>
</div>

Para gaps diferentes en filas y columnas:

<div class="d-grid" style="grid-template-columns: repeat(3, 1fr); column-gap: 2rem; row-gap: 1rem;">
  <div class="bg-primary text-white p-2">Elemento 1</div>
  <div class="bg-primary text-white p-2">Elemento 2</div>
  <div class="bg-primary text-white p-2">Elemento 3</div>
  <div class="bg-primary text-white p-2">Elemento 4</div>
  <div class="bg-primary text-white p-2">Elemento 5</div>
  <div class="bg-primary text-white p-2">Elemento 6</div>
</div>

Combinaciones complejas de utilidades

Las utilidades de grid se pueden combinar para crear posicionamientos sofisticados. Por ejemplo, un elemento que ocupe múltiples columnas y comience en una posición específica:

<div class="d-grid" style="grid-template-columns: repeat(6, 1fr); gap: 1rem;">
  <div class="g-col-1 bg-light p-2">1</div>
  <div class="g-col-3 g-start-2 bg-danger text-white p-2">
    3 columnas, empieza en posición 2
  </div>
  <div class="g-col-2 bg-light p-2">Ocupa el resto</div>
</div>

Posicionamiento en áreas específicas

Para layouts más complejos, podemos combinar CSS personalizado con las utilidades de Bootstrap para crear áreas nombradas:

<div class="d-grid" style="
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas: 
    'header header header header'
    'sidebar main main aside'
    'footer footer footer footer';
  gap: 1rem;
  height: 400px;
">
  <div style="grid-area: header;" class="bg-primary text-white p-3">Header</div>
  <div style="grid-area: sidebar;" class="bg-secondary text-white p-3">Sidebar</div>
  <div style="grid-area: main;" class="bg-light p-3">Main Content</div>
  <div style="grid-area: aside;" class="bg-info text-white p-3">Aside</div>
  <div style="grid-area: footer;" class="bg-dark text-white p-3">Footer</div>
</div>

Utilidades para saltar elementos

Una característica única de CSS Grid es la capacidad de dejar espacios vacíos intencionalmente. Podemos usar las utilidades de posicionamiento para crear estos efectos:

<div class="d-grid" style="grid-template-columns: repeat(5, 1fr); gap: 1rem;">
  <div class="g-col-1 bg-success text-white p-2">Elemento 1</div>
  <!-- Espacio vacío intencionalmente -->
  <div class="g-col-1 g-start-3 bg-warning text-dark p-2">Elemento 3</div>
  <div class="g-col-2 bg-danger text-white p-2">Elemento 4-5</div>
</div>

Alineación dentro de celdas grid

Bootstrap permite usar las utilidades de flexbox dentro de elementos grid para controlar la alineación interna:

<div class="d-grid" style="grid-template-columns: repeat(3, 1fr); gap: 1rem;">
  <div class="g-col-1 bg-light p-3 d-flex align-items-center justify-content-center" style="height: 120px;">
    <span class="badge bg-primary">Centrado</span>
  </div>
  <div class="g-col-1 bg-light p-3 d-flex align-items-end justify-content-end" style="height: 120px;">
    <span class="badge bg-secondary">Esquina inferior</span>
  </div>
  <div class="g-col-1 bg-light p-3 d-flex align-items-start" style="height: 120px;">
    <span class="badge bg-success">Parte superior</span>
  </div>
</div>

Utilidades responsive avanzadas

Las utilidades de grid responden a todos los breakpoints estándar de Bootstrap. Esto permite crear layouts que se reorganizan completamente en diferentes tamaños:

<div class="d-grid" style="
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
">
  <div class="g-col-4 g-col-md-2 g-col-lg-1 bg-primary text-white p-2">
    Elemento A
  </div>
  <div class="g-col-4 g-col-md-2 g-col-lg-3 bg-secondary text-white p-2">
    Elemento B
  </div>
  <div class="g-col-4 g-col-md-4 g-col-lg-2 g-start-lg-1 bg-success text-white p-2">
    Elemento C (reposicionado en desktop)
  </div>
</div>

Integración con componentes Bootstrap

Las utilidades de grid funcionan perfectamente con todos los componentes de Bootstrap, permitiendo layouts complejos sin comprometer la funcionalidad:

<div class="d-grid" style="grid-template-columns: repeat(3, 1fr); gap: 1.5rem;">
  <div class="g-col-1">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Card en Grid</h5>
        <p class="card-text">Contenido de la tarjeta dentro de CSS Grid.</p>
        <a href="#" class="btn btn-primary">Acción</a>
      </div>
    </div>
  </div>
  <div class="g-col-2">
    <div class="alert alert-info">
      <h4 class="alert-heading">Alerta expandida</h4>
      <p>Esta alerta ocupa 2 columnas del grid y mantiene toda su funcionalidad.</p>
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  </div>
</div>

Esta integración fluida demuestra cómo CSS Grid complementa, en lugar de reemplazar, el ecosistema existente de Bootstrap, proporcionando herramientas adicionales para casos de uso específicos que requieren control bidimensional preciso.

Layouts complejos y casos avanzados

Una vez dominadas las utilidades básicas de posicionamiento, CSS Grid en Bootstrap permite crear layouts sofisticados que van más allá de las disposiciones lineales tradicionales. Estos casos avanzados aprovechan la capacidad bidimensional del grid para resolver problemas de diseño complejos de manera elegante.

Layouts tipo dashboard

Los dashboards administrativos representan uno de los casos más comunes donde CSS Grid supera claramente al sistema tradicional. Estos layouts requieren paneles de diferentes tamaños que se relacionan tanto horizontal como verticalmente:

<div class="d-grid" style="
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 60px 200px 1fr 50px;
  gap: 1rem;
  height: 100vh;
">
  <!-- Header que ocupa toda la fila superior -->
  <div class="g-col-3 bg-primary text-white p-3 d-flex align-items-center">
    <h4 class="mb-0">Panel de Control</h4>
  </div>
  
  <!-- Sidebar que se extiende por múltiples filas -->
  <div style="grid-row: 2 / 4;" class="bg-light p-3">
    <nav class="nav flex-column">
      <a class="nav-link active" href="#">Dashboard</a>
      <a class="nav-link" href="#">Usuarios</a>
      <a class="nav-link" href="#">Reportes</a>
      <a class="nav-link" href="#">Configuración</a>
    </nav>
  </div>
  
  <!-- Métricas principales -->
  <div class="bg-info text-white p-3 rounded">
    <h5>Ventas Totales</h5>
    <h2>$24,500</h2>
  </div>
  
  <div class="bg-success text-white p-3 rounded">
    <h5>Usuarios Activos</h5>
    <h2>1,234</h2>
  </div>
  
  <!-- Área de contenido principal que ocupa 2 columnas -->
  <div class="g-col-2 bg-white p-3 border rounded">
    <h5>Gráfico Principal</h5>
    <div class="bg-light p-4 rounded text-center">
      Aquí iría el gráfico de ventas
    </div>
  </div>
  
  <!-- Footer completo -->
  <div class="g-col-3 bg-dark text-white p-2 d-flex align-items-center justify-content-between">
    <span>© 2024 Mi Empresa</span>
    <span>v1.0.0</span>
  </div>
</div>

Galerías de imágenes con tamaños variables

Las galerías tipo masonry aprovechan la capacidad de CSS Grid para crear layouts orgánicos donde los elementos tienen diferentes proporciones:

<div class="d-grid" style="
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  grid-auto-rows: minmax(200px, auto);
">
  <div class="bg-primary rounded overflow-hidden" style="grid-row: span 1;">
    <div class="h-100 d-flex align-items-center justify-content-center text-white">
      <span>Imagen Regular</span>
    </div>
  </div>
  
  <div class="bg-secondary rounded overflow-hidden" style="grid-row: span 2;">
    <div class="h-100 d-flex align-items-center justify-content-center text-white">
      <span>Imagen Vertical</span>
    </div>
  </div>
  
  <div class="bg-success rounded overflow-hidden" style="grid-row: span 1;">
    <div class="h-100 d-flex align-items-center justify-content-center text-white">
      <span>Imagen Cuadrada</span>
    </div>
  </div>
  
  <div class="bg-warning rounded overflow-hidden" style="grid-row: span 3;">
    <div class="h-100 d-flex align-items-center justify-content-center text-dark">
      <span>Imagen Destacada</span>
    </div>
  </div>
  
  <div class="bg-info rounded overflow-hidden" style="grid-row: span 1;">
    <div class="h-100 d-flex align-items-center justify-content-center text-white">
      <span>Imagen Normal</span>
    </div>
  </div>
</div>

Layouts responsivos con reorganización completa

CSS Grid permite reorganizaciones dramáticas del layout según el tamaño de pantalla, algo muy difícil de lograr con el sistema tradicional:

<div class="d-grid" style="
  grid-template-columns: 1fr;
  grid-template-areas: 
    'header'
    'main'
    'sidebar'
    'ads'
    'footer';
  gap: 1rem;
">
  <style>
    @media (min-width: 768px) {
      .advanced-layout {
        grid-template-columns: 1fr 300px;
        grid-template-areas: 
          'header header'
          'main sidebar'
          'main ads'
          'footer footer';
      }
    }
    
    @media (min-width: 992px) {
      .advanced-layout {
        grid-template-columns: 250px 1fr 200px;
        grid-template-areas: 
          'header header ads'
          'sidebar main ads'
          'footer footer footer';
      }
    }
  </style>
  
  <header style="grid-area: header;" class="bg-primary text-white p-3">
    <h1>Mi Sitio Web</h1>
  </header>
  
  <nav style="grid-area: sidebar;" class="bg-light p-3">
    <h5>Navegación</h5>
    <ul class="list-unstyled">
      <li><a href="#" class="text-decoration-none">Inicio</a></li>
      <li><a href="#" class="text-decoration-none">Productos</a></li>
      <li><a href="#" class="text-decoration-none">Contacto</a></li>
    </ul>
  </nav>
  
  <main style="grid-area: main;" class="bg-white p-4">
    <h2>Contenido Principal</h2>
    <p>Este contenido se reorganiza automáticamente según el tamaño de pantalla, demostrando la flexibilidad de CSS Grid para layouts responsivos complejos.</p>
  </main>
  
  <aside style="grid-area: ads;" class="bg-info text-white p-3">
    <h6>Publicidad</h6>
    <div class="bg-white text-dark p-2 rounded text-center">
      Banner 300x250
    </div>
  </aside>
  
  <footer style="grid-area: footer;" class="bg-dark text-white p-3 text-center">
    <p class="mb-0">© 2024 Todos los derechos reservados</p>
  </footer>
</div>

Superposición controlada de elementos

CSS Grid permite superponer elementos de manera controlada, útil para efectos visuales complejos o layouts creativos:

<div class="d-grid" style="
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 1rem;
">
  <!-- Elemento de fondo que ocupa múltiples celdas -->
  <div class="bg-light rounded" style="
    grid-column: 1 / 4;
    grid-row: 1 / 3;
    opacity: 0.3;
  "></div>
  
  <!-- Elementos superpuestos con contenido -->
  <div class="bg-primary text-white p-3 rounded shadow" style="
    grid-column: 1 / 3;
    grid-row: 1;
    z-index: 2;
  ">
    <h6>Elemento Principal</h6>
    <p class="mb-0">Superpuesto sobre el fondo</p>
  </div>
  
  <div class="bg-secondary text-white p-3 rounded shadow" style="
    grid-column: 2 / 4;
    grid-row: 2;
    z-index: 1;
  ">
    <h6>Elemento Secundario</h6>
    <p class="mb-0">Parcialmente superpuesto</p>
  </div>
  
  <!-- Elementos normales -->
  <div class="bg-success text-white p-3 rounded">
    <span>Normal</span>
  </div>
  
  <div class="bg-warning text-dark p-3 rounded">
    <span>Regular</span>
  </div>
</div>

Layouts de formularios complejos

CSS Grid es excelente para formularios complejos donde diferentes campos requieren espacios específicos:

<form class="d-grid" style="
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 800px;
">
  <!-- Título del formulario -->
  <div class="g-col-4">
    <h4>Información Personal</h4>
    <hr>
  </div>
  
  <!-- Campos que ocupan diferentes espacios -->
  <div class="g-col-2">
    <label class="form-label">Nombre</label>
    <input type="text" class="form-control">
  </div>
  
  <div class="g-col-2">
    <label class="form-label">Apellidos</label>
    <input type="text" class="form-control">
  </div>
  
  <div class="g-col-3">
    <label class="form-label">Email</label>
    <input type="email" class="form-control">
  </div>
  
  <div class="g-col-1">
    <label class="form-label">Edad</label>
    <input type="number" class="form-control">
  </div>
  
  <!-- Campo que ocupa todo el ancho -->
  <div class="g-col-4">
    <label class="form-label">Dirección</label>
    <textarea class="form-control" rows="2"></textarea>
  </div>
  
  <!-- Campos en una disposición específica -->
  <div class="g-col-2">
    <label class="form-label">Ciudad</label>
    <input type="text" class="form-control">
  </div>
  
  <div class="g-col-1">
    <label class="form-label">CP</label>
    <input type="text" class="form-control">
  </div>
  
  <div class="g-col-1">
    <label class="form-label">País</label>
    <select class="form-select">
      <option>España</option>
      <option>México</option>
      <option>Argentina</option>
    </select>
  </div>
  
  <!-- Botones alineados -->
  <div class="g-col-4 d-flex gap-2 justify-content-end">
    <button type="button" class="btn btn-secondary">Cancelar</button>
    <button type="submit" class="btn btn-primary">Guardar</button>
  </div>
</form>

Integración con componentes Bootstrap avanzados

CSS Grid funciona perfectamente con componentes interactivos complejos, permitiendo layouts que serían imposibles con el sistema tradicional:

<div class="d-grid" style="
  grid-template-columns: 300px 1fr;
  grid-template-rows: auto 1fr;
  gap: 1.5rem;
  height: 500px;
">
  <!-- Navegación con tabs que ocupa columna completa -->
  <div class="g-col-2">
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#tab1" data-bs-toggle="tab">Vista General</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#tab2" data-bs-toggle="tab">Detalles</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#tab3" data-bs-toggle="tab">Configuración</a>
      </li>
    </ul>
  </div>
  
  <!-- Sidebar con accordion -->
  <div class="bg-light p-3 rounded">
    <div class="accordion accordion-flush">
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne">
            Filtros
          </button>
        </h2>
        <div id="flush-collapseOne" class="accordion-collapse collapse show">
          <div class="accordion-body">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="filter1">
              <label class="form-check-label" for="filter1">Activos</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="filter2">
              <label class="form-check-label" for="filter2">Archivados</label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Área principal con contenido de tabs -->
  <div class="tab-content bg-white p-4 border rounded">
    <div class="tab-pane fade show active" id="tab1">
      <h5>Dashboard Principal</h5>
      <div class="row g-3">
        <div class="col-md-6">
          <div class="card">
            <div class="card-body">
              <h6 class="card-title">Métrica A</h6>
              <h3 class="text-primary">85%</h3>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="card">
            <div class="card-body">
              <h6 class="card-title">Métrica B</h6>
              <h3 class="text-success">1,234</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Consideraciones de performance y mantenimiento

Al implementar layouts complejos con CSS Grid, es importante mantener algunas mejores prácticas:

• Usa grid-template-areas para layouts complejos que se repiten, ya que hace el código más legible y mantenible
• Combina CSS Grid con flexbox dentro de elementos grid cuando necesites alineación interna precisa
• Planifica los breakpoints cuidadosamente para evitar reorganizaciones confusas en tamaños intermedios
• Documenta la lógica del layout especialmente cuando uses superposiciones o áreas nombradas complejas

Estos casos avanzados demuestran que CSS Grid en Bootstrap no reemplaza el sistema tradicional, sino que extiende las posibilidades para casos específicos donde el control bidimensional preciso es esencial para crear interfaces modernas y funcionales.