In the sixth lesson of the CSS Grid course we are going to discover and use the repeat function in our grid to repeat columns and rows.
In this lesson we are going to continue our layout of 9 empty blocks to play with the special repeat function provided by CSS Grid. What this function allows us is to save writing a large number of columns or rows when we assemble our grid.
In addition, we will also see how we can use proper names within the repeat function. As we saw in the previous lesson, it allows us to create aliases for the positions that we can use within our layout. Let’s go for it!
That easy! You already know how to use repeat in your CSS and save work when building your grids in CSS Grid. In addition, you already know how the name aliases work to be able to use them throughout your design and speed up the work and with this repeat thing you can take advantage of them more.
As we have seen, if we wanted to make 3 columns of 1fr instead of writing 1fr three times separated by commas, we could use repeat to repeat 1fr 3 times, obtaining the same result.
So we can see that the repeat function admits 2 arguments: the number of repetitions that we want to do and the unit of measure. We can use fr, px, etc. And not everything is here, we can nest several repeat functions and insert them within the same grid-template-row and grid-template-column property.
I encourage you to investigate on your own and practice with the repeat that we have seen in this lesson but instead of applying it to an example of empty blocks as in the lesson, that you apply it to the basic layout that we did in the first lessons also with CSS grid. It’s quite a challenge to set up the layout with repeat to dynamically generate the columns and rows.
As always, if you have any doubt or question, you can send it through the intranet support form and we will assist you. See you in the next lesson! 🙂
Remember that if you will have access to everybody the courses and you can also enjoy everything from .
Facebook Comments
Disqus