Welcome to Part-6 of the series.
In part-4 of the series, we used grid-column and grid-row concept to place items. In this part we will use another powerful concept of Grid known as Grid Template Areas to place items.
We will use this codepen for the tutorial. The basic code use for this tutorial is below.
<div class="container">
<div class="item item1">
<p>I'm Sidebar #1</p>
</div>
<div class="item item2">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, sed.</p>
<p>Lorem ipsum d</p>
</div>
<div class="item item3">
<p>I'm Sidebar #2</p>
</div>
<div class="item footer">
<p>I'm the footer</p>
</div>
</div>
Which is below. We basically want to have a 2 sidebars, a main content and a footer.
The basics
Now, we will have the grid layout. We will have 3 columns and 3 rows.
.container {
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr 10fr 1fr;
grid-template-rows: 150px 150px 100px;
}
The result
Now, let’s have our 2 sidebars, 1 main content and 1 footer layout. We do this by grid-template-areas and have the format as below. We mention what each row will contain.
.container {
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr 10fr 1fr;
grid-template-rows: 150px 150px 100px;
grid-template-areas:
"sidebar-1 content sidebar-2"
"sidebar-1 content sidebar-2"
"footer footer footer"
}
Now our layout with development tools open, will show the template areas.
The template areas
Now to place the content, we just have to select the item and then use grid-area. As in below code for footer, we will use .footer {grid-area: footer; }
We are selecting the footer class and then using the grid-area property.
<body>
<div class="container">
<div class="item item1">
<p>I'm Sidebar #1</p>
</div>
<div class="item item2">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, sed.</p>
<p>Lorem ipsum d</p>
</div>
<div class="item item3">
<p>I'm Sidebar #2</p>
</div>
<div class="item footer">
<p>I'm the footer</p>
</div>
</div>
<style>
.container {
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr 10fr 1fr;
grid-template-rows: 150px 150px 100px;
grid-template-areas:
"sidebar-1 content sidebar-2"
"sidebar-1 content sidebar-2"
"footer footer footer"
}
.footer {
grid-area: footer;
}
.item1 {
grid-area: sidebar-1;
}
.item2 {
grid-area: content;
}
.item3 {
grid-area: sidebar-2;
}
</style>
</body>
The result
By using grid-template-areas, it is also very easy to use media-queries. You only have to define the new layout. We are defining a media-query for width 700px as below.
[@media](http://twitter.com/media) (max-width: 700px) {
.container {
grid-template-areas:
"content content content"
"sidebar-1 sidebar-1 sidebar-2"
"footer footer footer"
}
}
Which results in the perfect tablet layout.
The tablet layout
We will look into one amazing property of Grid, by which we can create the legendary masonry layout.
We will use this codepen for this part. It have 70 items.
<body>
<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 class="item item31">31</div>
<div class="item item32">32</div>
<div class="item item33">33</div>
<div class="item item34">34</div>
<div class="item item35">35</div>
<div class="item item36">36</div>
<div class="item item37">37</div>
<div class="item item38">38</div>
<div class="item item39">39</div>
<div class="item item40">40</div>
<div class="item item41">41</div>
<div class="item item42">42</div>
<div class="item item43">43</div>
<div class="item item44">44</div>
<div class="item item45">45</div>
<div class="item item46">46</div>
<div class="item item47">47</div>
<div class="item item48">48</div>
<div class="item item49">49</div>
<div class="item item50">50</div>
<div class="item item51">51</div>
<div class="item item52">52</div>
<div class="item item53">53</div>
<div class="item item54">54</div>
<div class="item item55">55</div>
<div class="item item56">56</div>
<div class="item item57">57</div>
<div class="item item58">58</div>
<div class="item item59">59</div>
<div class="item item60">60</div>
<div class="item item61">61</div>
<div class="item item62">62</div>
<div class="item item63">63</div>
<div class="item item64">64</div>
<div class="item item65">65</div>
<div class="item item66">66</div>
<div class="item item67">67</div>
<div class="item item68">68</div>
<div class="item item69">69</div>
<div class="item item70">70</div>
</div>
<style>
.container {
display: grid;
grid-gap: 20px;
}
</style>
</body>
The basics
Now let have 10 columns of 1fr each.
.container {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(10, 1fr);
}
The result
Now let’s add some irregularity in the items, to make them of different sizes.
.item:nth-child(6n) {
background: cornflowerblue;
grid-column: span 6;
}
.item:nth-child(8n) {
background: tomato;
grid-column: span 2;
}
.item:nth-child(9n) {
background: lawngreen;
grid-row: span 2;
}
Which will result in this, which have many empty space in it.
The result
Now just one property grid-auto-flow: dense; fixes this. It is the property which tries to optimise the empty space by moving items around.
.container {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(10, 1fr);
grid-auto-flow: dense;
}
.item:nth-child(6n) {
background: cornflowerblue;
grid-column: span 6;
}
.item:nth-child(8n) {
background: tomato;
grid-column: span 2;
}
.item:nth-child(9n) {
background: lawngreen;
grid-row: span 2;
}
The perfect masonry
This results in the perfect masonry, but the order of the items are not guaranteed. So, we should use it only when order of items is not important.
This concludes part-6 of the tutorial.
Top comments (0)