Update reduce-repetition-using-the-repeat-function.english.md (#35787)
This commit is contained in:
committed by
The Coding Aviator
parent
42013c9080
commit
f590fecb34
@ -8,7 +8,7 @@ videoUrl: 'https://scrimba.com/p/pByETK/cQvqyHR'
|
||||
## Description
|
||||
<section id='description'>
|
||||
When you used <code>grid-template-columns</code> and <code>grid-template-rows</code> to define the structure of a grid, you entered a value for each row or column you created.
|
||||
Lets say you want a grid with 100 rows of the same height. It isn't very practical to insert 100 values individually. Fortunately, there's a better way - by using the <code>repeat</code> function to specify the number of times you want your column or row to be repeated, followed by a comma and the value you want to repeat.
|
||||
Let's say you want a grid with 100 rows of the same height. It isn't very practical to insert 100 values individually. Fortunately, there's a better way - by using the <code>repeat</code> function to specify the number of times you want your column or row to be repeated, followed by a comma and the value you want to repeat.
|
||||
Here's an example that would create the 100 row grid, each row at 50px tall.
|
||||
<blockquote>grid-template-rows: repeat(100, 50px);</blockquote>
|
||||
You can also repeat multiple values with the repeat function and insert the function amongst other values when defining a grid structure. Here's what that looks like:
|
||||
|
Reference in New Issue
Block a user