Sistema de Diseño con CSS Grid

/* Grid Container */
.grid-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}

/* Grid Row */
.grid-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

/* Grid Columns */
.grid-col {
  padding: 0 15px;
  margin-bottom: 30px;
  flex: 0 0 auto;
  box-sizing: border-box;
}

/* Column Widths */
.col-1 { width: 8.33333%; }
.col-2 { width: 16.66667%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33333%; }
.col-5 { width: 41.66667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33333%; }
.col-8 { width: 66.66667%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33333%; }
.col-11 { width: 91.66667%; }
.col-12 { width: 100%; }

/* Medium Screens (Tablets) */
@media (min-width: 768px) {
  .col-md-1 { width: 8.33333%; }
  .col-md-2 { width: 16.66667%; }
  .col-md-3 { width: 25%; }
  .col-md-4 { width: 33.33333%; }
  .col-md-5 { width: 41.66667%; }
  .col-md-6 { width: 50%; }
  .col-md-7 { width: 58.33333%; }
  .col-md-8 { width: 66.66667%; }
  .col-md-9 { width: 75%; }
  .col-md-10 { width: 83.33333%; }
  .col-md-11 { width: 91.66667%; }
  .col-md-12 { width: 100%; }
}

/* Large Screens (Desktops) */
@media (min-width: 992px) {
  .col-lg-1 { width: 8.33333%; }
  .col-lg-2 { width: 16.66667%; }
  .col-lg-3 { width: 25%; }
  .col-lg-4 { width: 33.33333%; }
  .col-lg-5 { width: 41.66667%; }
  .col-lg-6 { width: 50%; }
  .col-lg-7 { width: 58.33333%; }
  .col-lg-8 { width: 66.66667%; }
  .col-lg-9 { width: 75%; }
  .col-lg-10 { width: 83.33333%; }
  .col-lg-11 { width: 91.66667%; }
  .col-lg-12 { width: 100%; }
}

/* Extra Large Screens */
@media (min-width: 1200px) {
  .col-xl-1 { width: 8.33333%; }
  .col-xl-2 { width: 16.66667%; }
  .col-xl-3 { width: 25%; }
  .col-xl-4 { width: 33.33333%; }
  .col-xl-5 { width: 41.66667%; }
  .col-xl-6 { width: 50%; }
  .col-xl-7 { width: 58.33333%; }
  .col-xl-8 { width: 66.66667%; }
  .col-xl-9 { width: 75%; }
  .col-xl-10 { width: 83.33333%; }
  .col-xl-11 { width: 91.66667%; }
  .col-xl-12 { width: 100%; }
}

/* Content Styling (for demo purposes) */
.content-box {
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 20px;
  height: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
}

.content-box h3 {
  margin-top: 0;
  color: #2d3748;
  font-size: 1.25rem;
  margin-bottom: 10px;
}

.content-box p {
  color: #4a5568;
  margin-bottom: 0;
  line-height: 1.5;
}

.nested-box {
  background-color: #e2e8f0;
  padding: 10px;
  border-radius: 4px;
  margin-top: 10px;
  text-align: center;
  font-size: 0.875rem;
}

// Este sistema de grid es solo CSS y no requiere JavaScript.
// Sin embargo, podrías agregar JavaScript para funcionalidades adicionales.

document.addEventListener('DOMContentLoaded', function() {
  // Podrías agregar redimensionamiento dinámico de columnas, animaciones
  // u otras características interactivas aquí.
  
  // Ejemplo: Agregar una clase para animar elementos de grid al cargar la página
  const gridCols = document.querySelectorAll('.grid-col');
  
  gridCols.forEach((col, index) => {
    setTimeout(() => {
      col.style.opacity = '0';
      col.style.transform = 'translateY(20px)';
      
      // Forzar repintado
      void col.offsetWidth;
      
      // Agregar transición
      col.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
      
      // Mostrar con animación
      col.style.opacity = '1';
      col.style.transform = 'translateY(0)';
    }, index * 100);
  });
});