/* 3 equal columns */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* Each column is 1/3 of width */
}

/* Proportional columns (1:2:1) */
.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  /* Columns are 25%, 50%, 25% */
}

/* Mixed units with fr */
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  /* Fixed + flexible + fixed */
}

/* Columns that grow equally */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Same as 1fr 1fr 1fr */
}

/* Fr unit (cleaner) */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  /* Gap is separate, fr handles remaining space */
}

/* Percentage (requires calc) */
.grid {
  display: grid;
  grid-template-columns: calc(33.333% - 13px) calc(33.333% - 13px) calc(33.333% - 13px);
  gap: 20px;
  /* Complex calculation with gap */
}

/* Responsive sidebar layout */
.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 20px;
  /* Sidebar fixed, content grows */
}

/* 3-column card gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  /* Equal width columns */
}

/* Featured article with sidebar */
.featured {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  /* Main area 2x wider than sidebar */
}

/* Responsive with minmax */
.responsive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  /* Auto-fit columns, min 300px */
}