CSS Grid Layout System

snippet.publishedOn May 15, 2024 Intermediate

A responsive CSS grid layout system for creating modern web page structures with minimal code.

#grid #layout #responsive #css #framework

Live Preview

Code Implementation

HTML

<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>

CSS

/* 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;
}

JavaScript

// 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);
  });
});