Grid's auto-fit and auto-fill are super useful, and while the declaration is pretty long, and can seem complicated, it's not so bad once you break it down.

✅ Auto-fill vs. auto-fit demo: https://codepen.io/kevinpowell/pen/yyLYoZO
✅ More on getting started with Grid: https://youtu.be/rg7Fvvl3taU

.grid {
display: grid;
gap: var(--gap, 1rem);
grid-template-columns: repeat(
var(--grid-type, auto-fit),
minmax(min(180px, 100%), 1fr)
);
grid-auto-rows: 120px auto auto;
container-type: inline-size;
}

⌚ Timestamps
00:00 - Introduction
00:25 - The basics of grid columns
02:30 - Using the repeat syntax
03:15 - Breaking down repeat auto-fit
05:45 - Preventing overflow
08:00 - Use a variable for the minimum value
08:45 - How to remember this declaration
11:25 - The difference between auto-fit and auto-fill