Responsive Grid Layout

/* Responsive Grid Layouts */

/* Auto-fit Grid (Responsive without media queries) */
.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

/* Auto-fill Grid (Always fills available space) */
.grid-auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

/* Masonry-style Grid */
.grid-masonry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 20px;
  gap: 16px;
}

.grid-masonry-item {
  grid-row-end: span var(--row-span, 10);
}

/* Dashboard Grid */
.grid-dashboard {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.grid-dashboard .col-span-4 { grid-column: span 4; }
.grid-dashboard .col-span-6 { grid-column: span 6; }
.grid-dashboard .col-span-8 { grid-column: span 8; }
.grid-dashboard .col-span-12 { grid-column: span 12; }

@media (max-width: 768px) {
  .grid-dashboard .col-span-4,
  .grid-dashboard .col-span-6,
  .grid-dashboard .col-span-8 {
    grid-column: span 12;
  }
}

/* Pinterest-style Grid */
.grid-pinterest {
  column-count: 4;
  column-gap: 16px;
}

.grid-pinterest-item {
  break-inside: avoid;
  margin-bottom: 16px;
}

@media (max-width: 1024px) {
  .grid-pinterest { column-count: 3; }
}

@media (max-width: 768px) {
  .grid-pinterest { column-count: 2; }
}

@media (max-width: 480px) {
  .grid-pinterest { column-count: 1; }
}

/* Holy Grail Layout */
.grid-holy-grail {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  grid-template-columns: 250px 1fr 250px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 20px;
}

.grid-holy-grail header { grid-area: header; }
.grid-holy-grail .sidebar { grid-area: sidebar; }
.grid-holy-grail main { grid-area: main; }
.grid-holy-grail aside { grid-area: aside; }
.grid-holy-grail footer { grid-area: footer; }

@media (max-width: 768px) {
  .grid-holy-grail {
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "aside"
      "footer";
    grid-template-columns: 1fr;
  }
}

/* Tailwind CSS Version */
@layer components {
  .grid-responsive {
    @apply grid gap-6;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  
  .grid-cards {
    @apply grid gap-4;
    @apply grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4;
  }
  
  .grid-featured {
    @apply grid gap-6;
    @apply grid-cols-1 md:grid-cols-2 lg:grid-cols-3;
  }
  
  .grid-featured > :first-child {
    @apply md:col-span-2 md:row-span-2;
  }
  
  .grid-sidebar {
    @apply grid gap-6;
    @apply grid-cols-1 lg:grid-cols-[300px_1fr];
  }
  
  .grid-dashboard-tw {
    @apply grid gap-6;
    @apply grid-cols-1 md:grid-cols-2 lg:grid-cols-4;
  }
}

/* Usage Examples */
/*
<!-- Auto-fit Grid -->
<div class="grid-auto-fit">
  <div class="card">Item 1</div>
  <div class="card">Item 2</div>
  <div class="card">Item 3</div>
</div>

<!-- Masonry Grid -->
<div class="grid-masonry">
  <div class="grid-masonry-item" style="--row-span: 15">Tall item</div>
  <div class="grid-masonry-item" style="--row-span: 10">Medium item</div>
  <div class="grid-masonry-item" style="--row-span: 20">Very tall item</div>
</div>

<!-- Tailwind Responsive Grid -->
<div class="grid-responsive">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Tailwind Cards Grid -->
<div class="grid-cards">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>
*/