1. We create our grid-template-columns with the new unit by adding fr to our columns.
2. The fr unit divide the space in fractional unit, for example here our container is divide in 3 columns, so 1fr will take 1 part of the available space.
3. The fr unit work also with grid-template-rows.

Repeat function

1. By default we can in grid-template-rows and grid-template-columns simply add a columns or a row by adding a new parameter with a unit like this, grid-template-columns: 1fr 1fr 1fr, but there is a better way to do that.
2. If all your columns will be the same you can use the repeat() function who can help to avoid DRY.
3. The repeat() function need two parameters, the first parameter will be the number of columns you need, the second parameter is the size of yours columns.
4. So in our container above it would be like that, grid-template-columns: repeat(3,1fr).
5. This method can be very helpful if you have a lot of columns with the same size, work also with grid-template-rows.

Grid-template solution

1. Until now for create columns and rows we used this method grid-template-columns and grid-template-rows but there is a better solution.
2. The grid-template method is a shorthand for grid-template-columns and grid-template-rows the first instructions define row and the second define columns.
3. In your example above it could be like that, grid-template: repeat(2,50px) / repeat(3,1fr).
4. We can also combine with repeat() function.