jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-04-30 16:01:14 -04:00
Code Issues Projects Releases Wiki Activity

feat(curriculum): Add interactive examples to How Can You Position It ems on the Grid Using the grid-template-areas Property (#63167)

Browse Source
This commit is contained in:
Clarence Bakosi
2025-10-28 19:41:01 +01:00
committed by GitHub
parent 3f9345a107
commit ece9a98ae1
1 changed files with 55 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
curriculum/challenges/english/blocks/lecture-working-with-css-grid/673226b97d4a731e0577ae93.md
View File

@@ -5,7 +5,7 @@ challengeType: 19
dashedName: how-can-you-position-items-on-the-grid-using-the-grid-template-areas-property
---
# --description--
# --interactive--
The `grid-template-areas` property lets you design a visual grid layout by using named labels.
@@ -40,9 +40,12 @@ If you don't know what it is, the Holy Grail layout is a web design pattern with
Many solutions exist to implement the holy grail layout, but using `grid-template-areas` and the `grid-area` property is the most straightforward way to create it.
Here's the HTML for the holy grail layout:
Here's an example for the holy grail layout:
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css">
<div class="grid-container">
<div class="header">
<h2>Header</h2>
@@ -60,6 +63,56 @@ Here's the HTML for the holy grail layout:
</div>
```
```css
.grid-container {
display: grid;
grid-template-areas:
'header header header'
'sidebar-left main sidebar-right'
'footer footer footer';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.header {
grid-area: header;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
text-align: center;
}
.sidebar-left {
grid-area: sidebar-left;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
text-align: center;
}
.main {
grid-area: main;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
text-align: center;
}
.sidebar-right {
grid-area: sidebar-right;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
text-align: center;
}
.footer {
grid-area: footer;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
text-align: center;
}
```
:::
Please note that both the `grid-template-areas` and `grid-area` properties can be used independently of each other.
The `grid-template-areas` property is specifically used to define a visual layout by mapping out named grid areas within the grid container.