0

i am practicing grid layout in CSS. i have studied this syntax: grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); can anybody describe this line i have used to create responsive grid.

m-naeem66622
  • 425
  • 1
  • 5
  • 16

1 Answers1

1

repeat() => is used in grid-template-columns and grid-template-rows. It repeats the fragment according to your screen size.

auto-fit => it will fit as many columns on your screens according to your screen size.

minmax() => this function will choose a size range greater than or equal to min and less than or equal to max.which means between 300px and 1fr(fr = fractional unit default size of a column).

this line of css will create responsive columns according to your screen size and adjust the number of columns as the screen size increases or decreases

Syed Muhammad Moiz
  • 385
  • 2
  • 16
  • can you please guide more about minmax because i have visited the developers.mozilla.org documentation but it is too much complicated to understand for the absolute beginners... – m-naeem66622 Sep 05 '21 at 13:25