Autofit and minmax functions.

1. In this first example we will use the autofit function.
2. In this layout the insctruction is grid-template: repeat(2,150px) / repeat(auto-fit,200px).
3. This instructions indicate, create as many as possible columns as long the columns are = 200px auto-fit create a column but if one column is < 200px so auto-fit delete one column, each column can only be = at 200px so sometimes you have white space because there is not enough place for an other column.

What is minmax ?

1. In this example we will see how works minmax() function.
2. In this layout the instruction is repeat(2,150px) / repeat(auto-fit,minmax(200px,1fr)).
3. So minmax() indicate create as many as possible columns with a min-width of 200px and a max-width of 1fr. So if a column is less than 200px delete one column but if a column is more than 200px so take 1fr so take 1 space available in the container.