Repeating Grid Lines in CSS using grid-template-columns....

Repeating Grid Lines

While using the grid-template-columns property, if you do not want to specify the size of each column repeatedly, there is the repeat property that you can use to specify the size of several columns at one go. 

grid-template-columns : repeat(8,4fr);

This above property will make 8 columns , each column taking the space represented by the given fraction.

View the below codepen for a better visualization of the below property.

https://codepen.io/Vibs-coder/pen/ExpyLQQ

Any track-sizing value can be used in a repeat, from min-content and max-content to fr values to auto, and so on, and you can put together more than one sizing value.

Suppose we want to define a column structure such that there’s a 2em track, then a 1fr track, and then another 1fr track—and we want to repeat that pattern three times. 

This can be done with the following line 

grid-template-columns  : repeat(3 , 2em 1fr 1fr);

The below pen shows how this can be done. 

https://codepen.io/Vibs-coder/pen/xxJOQqV

In fact, we can add another track with the above repeat, just by writing it after the repeat. See the below pen to see how we added an extra 2em track, just by using a simple repeat after it. 

The below pen shows how this can be done.

https://codepen.io/Vibs-coder/pen/abjZGxj

For regular CSS articles follow me and if you have any suggestions put them in the comment box.