CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-06-13 21:02:08 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat(curriculum): Add interactive examples to How Can You Create Gaps Between Tracks in a Grid (#63159)

Browse Source
This commit is contained in:
Clarence Bakosi 2025-10-28 19:52:51 +01:00 committed by GitHub
parent e3d5b0ea4b
commit da0901ff21
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 43 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
curriculum/challenges/english/blocks/lecture-working-with-css-grid/6732267ecab2151ced471cd4.md
View File

@ -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
<link rel="stylesheet" href="styles.css">
<div class="grid-container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
```
```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
<link rel="stylesheet" href="styles.css">
<div class="grid-container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
```
```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
<link rel="stylesheet" href="styles.css">
<div class="grid-container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
```
```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.