Practical CSS Grid task: the container has grid-template-columns set with 5 fixed columns. How to override the property so that the number of columns becomes dynamic (adaptive)?

To make the number of columns in CSS Grid dynamic with fixed column widths, you can use the repeat function with the auto-fit or auto-fill keyword and a fixed column width via minmax.

Example:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

Here:

• auto-fit automatically adjusts the number of columns to fit in the container.
• minmax(150px, 1fr) sets the minimum column width to 150px and the maximum to stretch across the available space.

Thus, the number of columns will adapt to the container's width, maintaining a fixed minimum width for each column.