From 50234a240ec771a8ad8691fcfd3a7d35479668b2 Mon Sep 17 00:00:00 2001 From: Clarence Bakosi Date: Tue, 28 Oct 2025 20:03:45 +0100 Subject: [PATCH] feat(curriculum): Add interactive examples to How Can You Repeat Track Listings in a Grid Layout (#63160) --- .../6732268d05c3661d32a0fee8.md | 101 +++++++++++++----- 1 file changed, 72 insertions(+), 29 deletions(-) diff --git a/curriculum/challenges/english/blocks/lecture-working-with-css-grid/6732268d05c3661d32a0fee8.md b/curriculum/challenges/english/blocks/lecture-working-with-css-grid/6732268d05c3661d32a0fee8.md index c3d04f91019..88b5e49135a 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-css-grid/6732268d05c3661d32a0fee8.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-css-grid/6732268d05c3661d32a0fee8.md @@ -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 +
@@ -46,7 +21,73 @@ In this example, we have HTML markup for a grid container:
``` -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 + +
+
+
+
+
+
+``` + +```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 + +
+
+
+
+
+
+``` ```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--