/* minmax(minimum, maximum) */
.grid {
  display: grid;
  grid-template-columns: minmax(200px, 1fr);
  /* Column: minimum 200px, grows to 1fr */
}

/* Multiple columns with minmax */
.grid {
  display: grid;
  grid-template-columns: 
    minmax(100px, 1fr) 
    minmax(200px, 2fr)
    minmax(100px, 1fr);
  /* Columns with different min/max */
}

/* Row height constraints */
.grid {
  display: grid;
  grid-template-rows: minmax(100px, auto);
  /* Rows at least 100px, grow with content */
}

/* Responsive grid without media queries */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

/* Sidebar + main */
.layout {
  display: grid;
  grid-template-columns: minmax(200px, 250px) minmax(300px, 1fr);
  gap: 20px;
}

/* Header with responsive sizing */
.header {
  display: grid;
  grid-template-columns: minmax(100px, auto) minmax(200px, 1fr);
  gap: 20px;
}

/* Cards that don't shrink too small */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* Fully responsive layout */
.dashboard {
  display: grid;
  grid-template-columns:
    minmax(200px, 250px)    /* Sidebar: 200-250px */
    minmax(500px, 1fr);      /* Main: at least 500px, grows */
  grid-template-rows:
    minmax(60px, auto)       /* Header: at least 60px */
    1fr                      /* Content: fills space */
    minmax(40px, auto);      /* Footer: at least 40px */
  gap: 20px;
  height: 100vh;
}

/* Responsive cards */
.products {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(clamp(200px, 25vw, 400px), 1fr)
  );
  gap: 20px;
  /* clamp for even better responsiveness */
}