gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(curriculum): Add interactive examples to How Can You Repeat Track Listings in a Grid Layout (#63160)

Browse Source
This commit is contained in:
Clarence Bakosi
2025-10-28 20:03:45 +01:00
committed by GitHub
parent 5d3115764f
commit 50234a240e
1 changed files with 72 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/blocks/lecture-working-with-css-grid/6732268d05c3661d32a0fee8.md
+72 -29
View File
@@ -5,39 +5,14 @@ challengeType: 19
dashedName: how-can-you-repeat-track-listings-in-a-grid-layout
---
# --description--
# --interactive--
In the previous lessons, we have been working with the `grid-template-columns` property and setting the value to a few fractional units.
```css
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: 10px;
}
```
While the following code is completely valid, there is an easier way to repeat a section or all of your track listings.
The `repeat()` function is used to repeat a section or all of the tracks for columns or rows. This function takes in a repeat count and the tracks you wish to repeat.
Here is a revised version of the earlier example using the repeat function:
```css
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 10px;
}
```
There won't be a change for the styles in the browser, but this is a more concise way to write repeated values for the columns.
The `repeat()` function will accept any valid pattern that you can use for rows or columns.
In this example, we have HTML markup for a grid container:
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css">
<div class="grid-container">
<div class="box"></div>
<div class="box"></div>
@@ -46,7 +21,73 @@ In this example, we have HTML markup for a grid container:
</div>
```
Then we are using the `repeat()` function to set the first and third columns to 20 pixels and the second and fourth columns to one fractional unit.
```css
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: 10px;
}
.box {
width: 100px;
height: 100px;
background-color: darkblue;
}
```
:::
While the following code is completely valid, there is an easier way to repeat a section or all of your track listings.
The `repeat()` function is used to repeat a section or all of the tracks for columns or rows. This function takes in a repeat count and the tracks you wish to repeat.
Here is a revised version of the earlier example using the repeat function:
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css">
<div class="grid-container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
```
```css
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 10px;
}
.box {
width: 100px;
height: 100px;
background-color: darkblue;
}
```
:::
There won't be a change for the styles in the browser, but this is a more concise way to write repeated values for the columns.
The `repeat()` function will accept any valid pattern that you can use for rows or columns.
Here is an example using the `repeat()` function to set the first and third columns to 20 pixels and the second and fourth columns to one fractional unit.
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css">
<div class="grid-container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
```
```css
.grid-container {
@@ -61,6 +102,8 @@ Then we are using the `repeat()` function to set the first and third columns to
}
```
:::
Sometimes, you might opt to write out each individual value instead of using the `repeat()` function. But there are times when this function comes in handy, especially when you want to repeat a particular pattern for a track listing.
# --questions--