CSS Grid - Repeat Function
Exercise
- In the "index.html" file, replace the code with the following:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS</title> <link rel="stylesheet" href="./css/styles.css"> </head> <body> <h1>CSS Grid</h1> <h3>Repeat Function</h3> <!-- grid container --> <div class="grid-container-3-columns-by-3-rows"> <!-- flex items --> <div class="box box1"> <p>Grid Item 1</p> </div> <div class="box box2"> <p>Grid Item 2</p> </div> <div class="box box3"> <p>Grid Item 3</p> </div> <div class="box box4"> <p>Grid Item 4</p> </div> <div class="box box5"> <p>Grid Item 5</p> </div> <div class="box box6"> <p>Grid Item 6</p> </div> </div> <!-- grid container --> <div class="grid-container-3-columns-by-3-rows-repeat"> <!-- flex items --> <div class="box box1"> <p>Grid Item 1</p> </div> <div class="box box2"> <p>Grid Item 2</p> </div> <div class="box box3"> <p>Grid Item 3</p> </div> <div class="box box4"> <p>Grid Item 4</p> </div> <div class="box box5"> <p>Grid Item 5</p> </div> <div class="box box6"> <p>Grid Item 6</p> </div> </div> </body> </html>
- Save.
- If "Live Server" is not already running, right-click anywhere in the editor and select "Open with Live Server" from the context menu.
- In the "styles.css" file, replace the code with the following:
/* Reset Browser Defaults */ * { margin: 0; padding: 0; box-sizing: border-box; } .grid-container-3-columns-by-3-rows { border: 5px solid blue; margin: 10px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .grid-container-3-columns-by-3-rows-repeat { border: 5px solid blue; margin: 10px; display: grid; grid-template-columns: repeat(3, 1fr); } .box { padding: 1rem; border: 2px solid red; } .box1 { background: green; } .box2 { background: yellow; } .box3 { background: orange; } .box4 { background: brown; } .box5 { background: grey; } .box6 { background: violet; }
- Save.
- In the browser, you should see the following:
Code Walkthrough and Explanation
repeat()
The repeat()
function is a CSS grid function that allows you to specify the number of repetitions
of a
given grid track listing, as well as the size of each track. It is used to simplify the process of creating
grids with
a lot of similar tracks, as it can be cumbersome to write out each track listing individually.
The repeat()
function takes two arguments: the first argument specifies the number of times to
repeat
the given track listing, and the second argument specifies the size of each track. For example, the following
code
creates a grid with three columns that are each 100 pixels wide:
grid-template-columns: repeat(3, 100px);
You can also use the repeat()
function to create more complex track listings. For example, the
following
code creates a grid with three columns, where the first column is 200 pixels wide, the second column is 1
fraction
unit wide, and the third column is 100 pixels wide:
grid-template-columns: 200px repeat(1, 1fr) 100px;
In this case, the repeat()
function is only used to specify the number of times to repeat the 1fr
unit,
which is a flexible unit that takes up any available space in the grid container.
Experiment with the Code
- Try changing the values in the
repeat()
function and see what happens.
Video and Code References
Questions? Subscribe and ask in the video comments: