1494a50123
* fix: restructure certifications guide articles * fix: added 3 dashes line before prob expl * fix: added 3 dashes line before hints * fix: added 3 dashes line before solutions
53 lines
1.0 KiB
Markdown
53 lines
1.0 KiB
Markdown
---
|
|
title: Use grid-area Without Creating an Areas Template
|
|
---
|
|
# Use grid-area Without Creating an Areas Template
|
|
|
|
|
|
---
|
|
## Hints
|
|
|
|
### Hint 1
|
|
|
|
The `grid-area` takes values in the following format `horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at`.
|
|
|
|
|
|
---
|
|
## Solutions
|
|
|
|
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
|
|
|
```html
|
|
<style>
|
|
.item1{background:LightSkyBlue;}
|
|
.item2{background:LightSalmon;}
|
|
.item3{background:PaleTurquoise;}
|
|
.item4{background:LightPink;}
|
|
|
|
.item5 {
|
|
background: PaleGreen;
|
|
grid-area: 3/1/4/4;
|
|
}
|
|
|
|
.container {
|
|
font-size: 40px;
|
|
min-height: 300px;
|
|
width: 100%;
|
|
background: LightGray;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-template-rows: 1fr 1fr 1fr;
|
|
grid-gap: 10px;
|
|
}
|
|
</style>
|
|
|
|
<div class="container">
|
|
<div class="item1">1</div>
|
|
<div class="item2">2</div>
|
|
<div class="item3">3</div>
|
|
<div class="item4">4</div>
|
|
<div class="item5">5</div>
|
|
</div>
|
|
```
|
|
|
|
</details> |