Back-to-Basics: CSS Grid Definitions: grid-template-areas
Tags: css, tutorial, beginners
Published: 2020-04-11 18:25:16

|Grid Defs|   |
|---|---|
|Rows & Columns Only|[Back-to-Basics: CSS Grid Definitions: Rows & Columns Only](https://dev.to/stories_of_ren/back-to-basics-css-grid-definitions-rows-columns-only-2757)|
|Grid Template Areas|[(☞ﾟヮﾟ)☞You Are Here](https://dev.to/stories_of_ren/back-to-basics-css-grid-definitions-grid-template-area-17m8)|
|Grid Short Hand|[Back-to-Basics: CSS Grid Declarations: Shorthand](https://dev.to/stories_of_ren/back-to-basics-css-grid-declarations-shorthand-gfp)|


As we learned from the Rows & Columns only walk-through Grid is a layout model that allows for more control of sizing and positioning of boxes and their contents. Grid is also a 2d model allowing to define columns and rows in the initial grid definition. This is in contrast to the flexbox model that allows for building a grid by separating the definition of each row and column. However, I want to make sure you know that each model has its uses and is not necessarily better than the other. I digress, this is about CSS `grid-template-areas`, so let's get back on track...  
![Rory likes knowing things](https://media.giphy.com/media/26BRJbetNC9kKdD4Q/giphy.gif)

### __Defining a grid and placing its items__:

- __`grid-template-areas`__

![Grid Preview](https://dev-to-uploads.s3.amazonaws.com/i/6sizz8hj4giivmhsd7x6.PNG)

A little note about `grid-template-areas`:
>Typically you'll want to use `grid-template-columns` and `grid-template-rows` in conjunction with `grid-template-areas` to have a better definition of space otherwise the grid will fill in an automatic way unless you have heights and widths set on you grid items.

Now how do we get our Grid on with `grid-template-areas`??

First, let's set up our HTML and define our base Grid:

- __HTML:__
``` HTML
    <div class="Grid">
	<div class="Item1"></div>
	<div class="Item2"></div>
	<div class="Item3"></div>
    </div>
```

- __.Grid:__

``` CSS
.Grid {
    display: grid;
    grid-gap: 0.5rem;
    grid-template-areas: "i1 i2  i2"  "i1 i3 i3"  "i1 i3 i3";
    grid-template-columns: 0.7fr 1fr 1fr;
    grid-template-rows: 0.5fr 1fr 1fr;
}
// I use grid-gap to give a defining space so that the content is easier to read.
// grid-template-columns and grid-template-rows are used also so I don't need to
// define heights and widths in my grid items
```
![Grid Areas Example](https://dev-to-uploads.s3.amazonaws.com/i/r186q4c0a7zj85wrkvdt.png)

Placing our grid items in this configuration is a touch easier than defining their placement via the line reference, in this method we will use the attribute `grid-area` in each of our item's CSS definition referencing the area (`i1, i2, or i3`) that it will occupy. 


``` CSS
.Item1 {
	grid-area: i1;
}
.Item2 {
	grid-area: i2;
}
.Item3 {
	grid-area: i3;
}

```
After we place our items we wind up with:
![Final Grid](https://dev-to-uploads.s3.amazonaws.com/i/4ty25vumhfkdm7w061zf.png)

Here's the pen:
<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="result" data-user="ren_estep" data-slug-hash="0f9f9aefc3a8a1f7c2166657f2540028" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Grid Definition using grid-template-areas">
  <span><a href="https://codepen.io/ren_estep/pen/0f9f9aefc3a8a1f7c2166657f2540028">
  Grid Definition using grid-template-area</a> by Ren Estep (<a href="https://codepen.io/ren_estep">@ren_estep</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


At this point, you're probably like how can CSS Grid get even more awesome but [Can I use it ?](https://caniuse.com/#search=css%20grid)
![Can I use CSS Grid](https://dev-to-uploads.s3.amazonaws.com/i/o9gjy4y21ueohzmhuw4o.png)
Well, it's partially supported for IE11, but for safety sake, I highly suggest a polyfill. 
(**_If you have a preferred polyfill post it in the comments_**)

Look for more on CSS Grid in the next week