CSS Grid (Part 13B)— Grid Template Areas
How to use Grid Area lines
Live dev notes taken throughout the CSS Grid course by Wesbos — cssgrid.io
Following on from part 1, we looked into understanding how to use grid-template-areas as an alternative to defining where to place and span items on a grid.
When you create grid areas, you get line names which are associated to those areas.
Part 2 looks into utilising these lines.
The process of creating and placing items in grid-template-areas can be done slightly differently in this case, where we first:
- Define a container with items
- Without defining your tracks, outline your zones through
grid-template-area - Declare our start and stop using the are names we defined
1 — Define a container with items
Similar to the Spanning and Placing Cardio, we’ll start off with a single column grid of 30 items that has a grid-gap of 20px:
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
<div class="item item10">10</div>
<div class="item item11">11</div>
<div class="item item12">12</div>
<div class="item item13">13</div>
<div class="item item14">14</div>
<div class="item item15">15</div>
<div class="item item16">16</div>
<div class="item item17">17</div>
<div class="item item18">18</div>
<div class="item item19">19</div>
<div class="item item20">20</div>
<div class="item item21">21</div>
<div class="item item22">22</div>
<div class="item item23">23</div>
<div class="item item24">24</div>
<div class="item item25">25</div>
<div class="item item26">26</div>
<div class="item item27">27</div>
<div class="item item28">28</div>
<div class="item item29">29</div>
<div class="item item30">30</div>
</div><style>
.container {
display: grid;
grid-gap: 20px;
}
</style>
2 — Without defining your tracks, outline your zones through grid-template-area
In this example, the content inside each item has been reduced to 1–2 digits, so we no longer have to consider the width and height of each item.
.container {
display: grid;
grid-gap: 20px;
grid-template-areas:
"💩💩💩💩🍔🍔🍔🍔"
"💩💩💩💩🍔🍔🍔🍔"
"💩💩💩💩🍔🍔🍔🍔"
"💩💩💩💩🍔🍔🍔🍔"
;
}When we turn on our “Display area names”, we should see this:
The brilliance of writing it out this way is that all the grid items that are assigned one value (such as 💩) is considered one area.
.item3 {
grid-area: 💩;
}Now item3 covers the whole area.
3 — Declare our start and stop using the are names we defined
Previously we specified the track number when placing and sizing items on the grid like so:
.item3 {
grid-column: 2 / 5;
}
Now that we have defined these areas, we can use these area names as the start and stop of items using -start and -end:
.item3 {
grid-column: 💩-start / 💩-end;
}
To stretch it across both areas:
.item3 {
grid-column: 💩-start / 🍔-end;
}
To anchor “item3” to the bottom explicit row:
.item3 {
grid-column: 💩-start / 🍔-end;
grid-row-end: 💩-end;
}