.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 250px); 
   grid-auto-columns: 150px;
  gap: 10px;
  
}

.fixed-grid {
  display: grid;
  grid-template-columns: 200px 150px 100px;
  gap: 15px;
}

.percentage-grid {
  display: grid;
  grid-template-columns: 50% 30% 20%;
  gap: 10px;
}


.repeat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.auto-fit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
}
 /* E-commerce Product Grid */
 .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.product-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-columns: 1fr;
  gap: 15px;
}

/* Extra cards automatically get equal width */
.card:nth-child(4) { grid-column: 4; }
.card:nth-child(5) { grid-column: 5; }
/* end ecommerce grid */

/* Mobile First - Single Column */
.responsive-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

/* Tablet - Two Columns */
@media (min-width: 768px) {
  .responsive-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* Desktop - Three Columns */
@media (min-width: 1024px) {
  .responsive-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }
}

/* Large Desktop - Four Columns */
@media (min-width: 1280px) {
  .responsive-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
  }
}

/* Responsive Design Strategies */
/* Mobile First - Single Column */
.responsive-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

/* Tablet - Two Columns */
@media (min-width: 768px) {
  .responsive-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* Desktop - Three Columns */
@media (min-width: 1024px) {
  .responsive-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }
}

/* Large Desktop - Four Columns */
@media (min-width: 1280px) {
  .responsive-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
  }
}

.container-responsive {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

@container (max-width: 600px) {
  .container-responsive {
    grid-template-columns: 1fr;
  }
}

@container (min-width: 900px) {
  .container-responsive {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* end Responsive Design */

/* Common Patterns and Best Practices */

/* Named Grid Lines */

.named-grid {
  display: grid;
  grid-template-columns: 
    [sidebar-start] 250px 
    [sidebar-end main-start] 1fr 
    [main-end aside-start] 200px 
    [aside-end];
  gap: 20px;
}

.sidebar {
  grid-column: sidebar-start / sidebar-end;
}

.main-content {
  grid-column: main-start / main-end;
}

.aside {
  grid-column: aside-start / aside-end;
}

/* Fallback for older browsers */
.grid-container {
  display: flex; /* Flexbox fallback */
  flex-wrap: wrap;
}

.grid-item {
  flex: 1 1 300px; /* Flexible base width */
}

/* Modern grid enhancement */
@supports (display: grid) {
  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
  }
  
  .grid-item {
    flex: none; /* Reset flex properties */
  }
}

/* Debug styles for development */
.debug-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px; /* Minimal gap to see grid structure */
  background: #ff0000; /* Red background shows through gaps */
}

.debug-grid > * {
  background: #ffffff; /* White background for items */
  border: 1px solid #000000; /* Black border for visibility */
}