/* repeat(count, pattern): repeat a track pattern */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Creates 3 equal columns: 1fr 1fr 1fr */
}

/* Same as: grid-template-columns: 1fr 1fr 1fr */

/* Different pattern */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 200px);
  /* Creates 4 columns of 200px each */
}

/* Same as: grid-template-columns: 200px 200px 200px 200px */

/* Complex pattern */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr 2fr);
  /* Repeats pattern twice: 1fr 2fr 1fr 2fr */
}

/* Useful for symmetric patterns */

/* Combining with other units */
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  /* 3 columns, each min 200px, growing with 1fr */
}

/* auto-fit: create as many columns as fit, collapse empty */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

/* On 1000px width: ~4 columns (1000 / 200 ≈ 5) */
/* Each grows with 1fr to fill space */
/* No empty tracks: space goes to columns */

/* Visual example at different widths: */
/* 300px: 1 column [300px] */
/* 600px: 2 columns [300px] [300px] */
/* 900px: 3 columns [300px] [300px] [300px] */
/* 1200px: 4 columns [300px] [300px] [300px] [300px] */

/* auto-fill: create columns, keep empty ones */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  width: 600px;
}

/* Can fit 3 columns (600 / 200 = 3) */
/* Creates 3 columns, fills space, keeps empty track */
/* [200px] [200px] [200px] [empty track for layout] */

/* Key difference in practice: */

/* auto-fit: spaces items evenly, grows columns */
.auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /* Columns grow to distribute space evenly */
}

/* auto-fill: fixed item width, distributes remaining space in empty track */
.auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* Items stay 200px or grow, empty track takes extra space */
}

/* auto-fit usually preferred */

/* Perfect responsive grid with auto-fit */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

/* Automatically responsive: */
/* Narrow (300px): 1 column */
/* Tablet (768px): 3 columns */
/* Desktop (1200px): 4+ columns */
/* No media queries needed! */

/* With clamp for even better scaling */
.items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 25vw, 400px), 1fr));
  gap: 20px;
}

/* Item width scales with viewport */
/* Minimum 150px, preferred 25% viewport, maximum 400px */

/* Card gallery pattern */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  padding: 24px;
}

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
}

/* Cards adapt to available space */

/* Product grid */
.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.product {
  /* Each product card automatically sized */
}

/* Perfect for e-commerce */

/* Image gallery with different aspect ratios */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  auto-rows: 150px;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Square grid that adapts to width */

/* Combining repeat with named grid lines */
.grid {
  display: grid;
  grid-template-columns:
    [start] repeat(auto-fit, minmax(200px, 1fr)) [end];
  gap: 20px;
}

/* Named lines at start and end */

/* Multiple repeat patterns in one grid */
.complex {
  display: grid;
  grid-template-columns:
    100px
    repeat(auto-fit, minmax(200px, 1fr))
    100px;
  gap: 20px;
}

/* Combines fixed + responsive + fixed */

/* Repeat with different units */
.mixed {
  display: grid;
  grid-template-columns: repeat(2, 1fr 2fr);
  /* Pattern 1fr 2fr repeats twice */
}

/* Asymmetric repeating pattern */

/* Row templates with repeat */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(auto-fit, 200px);
  gap: 20px;
}

/* Rows repeat automatically up to 200px each */
/* Columns fixed at 3 equal columns */

/* Grid with auto-rows and repeat columns */
.items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-auto-rows: minmax(200px, auto);
  gap: 20px;
}

/* Columns responsive, rows auto-sized */
/* Perfect for variable-height items */

/* Efficient responsive grid */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

/* Single CSS rule, no media queries */
/* Grid handles responsiveness automatically */
/* Very efficient for browser to calculate */

/* Fallback for older browsers */
@supports (grid-template-columns: repeat(auto-fit, minmax(1px, 1fr))) {
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@supports not (grid-template-columns: repeat(auto-fit, minmax(1px, 1fr))) {
  .gallery {
    display: flex;
    flex-wrap: wrap;
    /* Flexbox fallback */
  }
}

/* Use grid where supported */

/* Constrain growth for very wide screens */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  max-width: 1600px;
  margin: 0 auto;
}

/* Limits growth on extra-wide displays */

/* Aspect ratio with responsive grid */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.item {
  aspect-ratio: 1;
  overflow: hidden;
  background: #f5f5f5;
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Maintains aspect ratio while responsive */