CSS Grid

Basic

grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));

auto-fit: If you have extra space, auto-fit stretches the columns to fill the entire row.

minmax(): This defines the size range for each column

• The Minimum: min(300px, 100%)

• The Maximum: 1fr (one fraction of the remaining space).

min(300px, 100%):

• Normally, we'd just put 300px here. However, if the screen is only 280px wide (like an old phone), a fixed 300px would cause horizontal scrolling.

• By using min(300px, 100%), you are saying: "Be 300px wide, unless the screen is smaller than 300px, in which case just take up 100% of the width."