<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>Column 1</h3>
<p>This is a responsive column that will resize based on screen width.</p>
</div>
</div>
<div class="grid-col col-12 col-md-6 col-lg-4">
<div class="content-box">
<h3>Column 2</h3>
<p>This column will stack on mobile and display side by side on larger screens.</p>
</div>
</div>
<div class="grid-col col-12 col-md-12 col-lg-4">
<div class="content-box">
<h3>Column 3</h3>
<p>The grid system supports different column widths at various breakpoints.</p>
</div>
</div>
</div>
<div class="grid-row">
<div class="grid-col col-12 col-md-4">
<div class="content-box">
<h3>Nested Grid</h3>
<p>You can nest grid rows inside columns for complex layouts.</p>
<div class="grid-row">
<div class="grid-col col-6">
<div class="nested-box">Nested 1</div>
</div>
<div class="grid-col col-6">
<div class="nested-box">Nested 2</div>
</div>
</div>
</div>
</div>
<div class="grid-col col-12 col-md-8">
<div class="content-box">
<h3>Flexible Sizing</h3>
<p>This column takes up 8/12 of the available space on medium screens and above.</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;
}
// This grid system is CSS-only and doesn't require JavaScript.
// However, you could add JavaScript for additional functionality.
document.addEventListener('DOMContentLoaded', function() {
// You could add dynamic column resizing, grid item animations,
// or other interactive features here.
// Example: Add a class to animate grid items on page load
const gridCols = document.querySelectorAll('.grid-col');
gridCols.forEach((col, index) => {
setTimeout(() => {
col.style.opacity = '0';
col.style.transform = 'translateY(20px)';
// Trigger reflow
void col.offsetWidth;
// Add transition
col.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
// Show with animation
col.style.opacity = '1';
col.style.transform = 'translateY(0)';
}, index * 100);
});
});