From da0901ff21e39293f1a46f3c61b6d9dd7fe3dd08 Mon Sep 17 00:00:00 2001 From: Clarence Bakosi Date: Tue, 28 Oct 2025 19:52:51 +0100 Subject: [PATCH] feat(curriculum): Add interactive examples to How Can You Create Gaps Between Tracks in a Grid (#63159) --- .../6732267ecab2151ced471cd4.md | 44 ++++++++++++++++++- 1 file changed, 43 insertions(+), 1 deletion(-) diff --git a/curriculum/challenges/english/blocks/lecture-working-with-css-grid/6732267ecab2151ced471cd4.md b/curriculum/challenges/english/blocks/lecture-working-with-css-grid/6732267ecab2151ced471cd4.md index ccf76574b84..a4ed00ba992 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-css-grid/6732267ecab2151ced471cd4.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-css-grid/6732267ecab2151ced471cd4.md @@ -5,7 +5,7 @@ challengeType: 19 dashedName: how-can-you-create-gaps-between-tracks-in-a-grid --- -# --description-- +# --interactive-- In the previous lessons, we talked a little bit about how to create space between grid items. But in this lesson, we will dive into more detail about how to use the `row-gap`, `column-gap` and `gap` properties in a grid layout. @@ -28,6 +28,18 @@ Here is an example of the markup for a four column grid layout: For the CSS, we set the display to grid and the `column-gap` property to 10 pixels: +:::interactive_editor + +```html + +
+
+
+
+
+
+``` + ```css .grid-container { display: grid; @@ -41,8 +53,22 @@ For the CSS, we set the display to grid and the `column-gap` property to 10 pixe } ``` +::: + If we wanted to change the example to have two rows of blue boxes and create more space between the rows, we can use the `row-gap` property: +:::interactive_editor + +```html + +
+
+
+
+
+
+``` + ```css .grid-container { display: grid; @@ -57,6 +83,8 @@ If we wanted to change the example to have two rows of blue boxes and create mor } ``` +::: + In this revised example, we are setting the `row-gap` property to 30 pixels and changing the `grid-template-columns` to use just two `1fr` units instead of four to create two rows of boxes. Just like the `column-gap` property, acceptable values for the `row-gap` property can include percentages, `em`, and pixels. @@ -69,6 +97,18 @@ gap: row-value optional-column-value; If you specify one value for the `gap` property, then that value will be applied to both rows and columns. If you specify two values, then the first value will go to the row and the second will be applied to the column: +:::interactive_editor + +```html + +
+
+
+
+
+
+``` + ```css .grid-container { display: grid; @@ -82,6 +122,8 @@ If you specify one value for the `gap` property, then that value will be applied } ``` +::: + Acceptable values for the `gap` shorthand property include percentages, pixels, `em` and even `calc()` values. But you cannot use `fr` units here. The `row-gap`, `column-gap`, and `gap` properties provide flexible ways to control spacing between items in a CSS Grid layout. By using these properties, you can easily create visually appealing grids with consistent and adjustable gaps between rows and columns.