<div class="grid-container">
<div class="grid-row">
<div class="grid-col col-12 col-md-6 col-lg-4">
<div class="content-box">
<h3>Columna 1</h3>
<p>Esta es una columna responsive que cambiará de tamaño según el ancho de la pantalla.</p>
</div>
</div>
<div class="grid-col col-12 col-md-6 col-lg-4">
<div class="content-box">
<h3>Columna 2</h3>
<p>Esta columna se apilará en móviles y se mostrará lado a lado en pantallas más grandes.</p>
</div>
</div>
<div class="grid-col col-12 col-md-12 col-lg-4">
<div class="content-box">
<h3>Columna 3</h3>
<p>El sistema de grid soporta diferentes anchos de columna en varios puntos de ruptura.</p>
</div>
</div>
</div>
<div class="grid-row">
<div class="grid-col col-12 col-md-4">
<div class="content-box">
<h3>Grid Anidado</h3>
<p>Puedes anidar filas de grid dentro de columnas para diseños complejos.</p>
<div class="grid-row">
<div class="grid-col col-6">
<div class="nested-box">Anidado 1</div>
</div>
<div class="grid-col col-6">
<div class="nested-box">Anidado 2</div>
</div>
</div>
</div>
</div>
<div class="grid-col col-12 col-md-8">
<div class="content-box">
<h3>Tamaño Flexible</h3>
<p>Esta columna ocupa 8/12 del espacio disponible en pantallas medianas y superiores.</p>
</div>
</div>
</div>
</div>
/* 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);
});
});