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.
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. The below picture shows us how the column sizing is done.
You can look in the below codepen to better visualize the above property.
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.
For regular CSS articles follow me and if you have any suggestions put them in the comment box.