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 Create Flexible Grids with the fr Unit (#63158)

Browse Source
This commit is contained in:
Clarence Bakosi
2025-10-28 19:57:37 +01:00
committed by GitHub
parent 00dbf47253
commit 23bb0ce704
1 changed files with 33 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/blocks/lecture-working-with-css-grid/673226732b19aa1cacd0a75c.md
+33 -5
View File
@@ -5,7 +5,7 @@ challengeType: 19
dashedName: how-can-you-create-flexible-grids-with-the-fr-unit
---
# --description--
# --interactive--
In the previous lesson, you were introduced to CSS grid which can be used to create complex and fluid layouts in your web pages. In this lesson, we will explore how to create flexible grid layouts using the `fr` unit.
@@ -22,11 +22,23 @@ Let's start with this HTML markup which is going to represent our grid container
Inside the CSS, we set the display property to grid for the container.
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css" />
<div class="grid-container">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
```
```css
html,
body {
width: 100%;
height: 100%;
width: 90%;
height: 50%;
}
.grid-container {
@@ -42,6 +54,8 @@ body {
}
```
:::
`grid-template-columns` is used to set the size for each column. In this case, each column size will be `25%` of the container. Then the gap property is used to create space around each column.
So far we have been using percentages for the column size but we can also use the `fr` unit.
@@ -50,11 +64,23 @@ The `fr` unit is a fractional unit which represents a fraction of the space for
Here is what the code will look like when it is refactored to use `fr` units instead of percentages.
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css" />
<div class="grid-container">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
```
```css
html,
body {
width: 100%;
height: 100%;
width: 90%;
height: 50%;
}
.grid-container {
@@ -70,6 +96,8 @@ body {
}
```
:::
Each column will take up one fraction of the available space. Since there are four columns, each column will have an equal share of the space available in the grid container.
As you start to build your grid layouts, you will find yourself wanting to use `fr` units more often because they provide a flexible, proportional way to distribute space, allowing you to create responsive layouts that adapt to varying screen sizes without needing to manually adjust pixel values.