CSS Grid — auto-fit vs auto-fill for responsive layouts

Creating a responsive grid that automatically adjusts column count based on container width, without media queries. Confusion between auto-fit and auto-fill and when to use each.

Use: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)). auto-fit: collapses empty tracks, stretching items to fill the row. auto-fill: keeps empty tracks, maintaining minimum size. Use auto-fit for most cases — items stretch to fill available space. Use auto-fill when you want items to maintain a consistent size even when there's extra space. The minmax() sets minimum column width (250px) and maximum (1fr = fair share of remaining space). No media queries needed.

auto-fit and auto-fill both create as many columns as will fit, but differ in how they handle leftover space. auto-fit collapses empty columns so existing items stretch; auto-fill keeps them so items don't grow.