CSS Grid part 1
Tags: beginners, css
Published: 2019-11-26 19:47:53

---
title: CSS Grid part 1
published: true
description: A beginners guide to CSS Grid
tags: beginners, css
series: FrontEnd Development Zero to Hero
---
CSS grid is another layout algorithm similar to [_Flexbox_](https://dev.to/ziizium/css-flexbox-part-1-48f9) designed to ease _User Interface design_  of websites and complex applications albeit with some subtle differences.

Unlike Flexbox which is single-axis oriented (the cross or main axis), grid layout is optimized for two-dimensional layouts, this means it allows grid items to be placed in arbitrary locations in the grid container. You can think of the CSS grid as a _graph_ in mathematics.

Using CSS Grid the developer can transform the visually layout structure of the document without touching the markup because you can place grid item anywhere you want them in the grid container using grid specific properties.

The [CSS Grid specification](https://www.w3.org/TR/css-grid-1/) is quite technical and I will be using it sparingly in this post.

_The following snippets will be used in this post with slight modifications along the way. Please save the snippets with the `.html` and `.css` extension respectively and make sure the CSS file is linked with the HTML. Remember all HTML snippets should be placed between the start and closing `body` tag in your HTML_.


```html
<div class="parent">
  <div class="child-1"></div>
  <div class="child-2"></div>
  <div class="child-3"></div>
  <div class="child-4"></div>
  <div class="child-5"></div>
  <div class="child-6"></div>
</div>
```
```css
.parent {
  /* We will add stuff later */
}

/*
 * We are using a attribute selector to select all
 * child boxes
*/
[class ^= "child"] {
  width: 100%;                 /* The width of the box */
  height: 150px;               /* The height of the box */
  margin-right:0.5em;          /* Some outer spacing to the right of the box */
  margin-bottom: 0.5em;        /* Some outer spacing to the bottom part of the box */
}


/*
 * The child elements have been given colors so that
 * we can tell them apart
*/
.child-1 {
  background-color: tomato;
}

.child-2 {
  background-color: #1560bd;
}

.child-3 {
  background-color: #3eb489;
}

.child-4 {
  background-color: #ffc40c;
}

.child-5 {
  background-color: #da680f;
}

.child-6 {
  background-color: #0a7e8c;
}
```

_And kindly note that all screenshots are from <b>Firefox 70</b> web browser and its Developer Tools_.

With that out of the way. Let's Start.

<hr>

Similar to Flexbox there are some key terminologies that'll help us get a bigger picture of the  CSS Grid layout algorithm. These terminologies are theoretical concepts of CSS Grid and to really see the practical application we will mention some of the grid properties that make them possible.

###__GRID LAYOUT TERMINOLOGY__
The following terms are associated with CSS Grid:

* Grid container
* Grid item
* Grid line
* Grid Cell
* Grid Track
* Grid Area
* Grid Gap

###__Grid container__

A grid container is any element with its `display` property set to the grid.

Update the `.parent` CSS rule with the following:

```css
.parent {
  /* All other properties remain the same */
 
  display: grid;  /* Add this */
}
```

Load the HTML in your browser. You won't see any noticeable changes until you use the _Developer Tools_ and check the _Grid_ under the __Layout__ tab then _click the checkbox_ under _Overlay Grid_ and hover your mouse over `div.parent`.

![Grid items in a grid container](https://thepracticaldev.s3.amazonaws.com/i/vl7t08fagjyovqlrk6ow.PNG)

###__Grid item__
This is the direct first-level descendant element of a grid container and is automatically placed on the grid and you can also place each grid item at any location in the grid container.

The colored boxes in our code snippet are examples of grid items.

![Colored boxes in the browser](https://thepracticaldev.s3.amazonaws.com/i/fa5kea324o52z3mzyx3f.PNG)

###__Grid line__
Horizontal (row) or vertical (column) line separating the grid into sections. 

Gridlines are referenced by number, starting and ending with the outer borders of the grid. Gridlines can also be named for easier reference as we'll see later

Update the `.parent` CSS rule with the following and save your file:

```css
.parent {
  /* All other properties remain the same */
 
  /*
   * The following properties are just cosmetics
   *  that will enable us to see the grid lines
  */
  width: 70%;      /* Add this */
  margin: 0 auto;  /* Add this */
}
```

In the _Developer Tools_ under _Grid Display Settings_ click the checkbox __Extend lines infinitely__.

![Grid items in a grid container](https://thepracticaldev.s3.amazonaws.com/i/ntb691w7bsdu5505bthd.PNG)

Now, click on "Display line numbers".

![Grid items in a grid container](https://thepracticaldev.s3.amazonaws.com/i/o8qr8wos3w6fl1478o7i.PNG)

###__Grid cell__

The grid cell is the intersection between a _grid row_ and a _grid column_. This is similar to a cell in a table. 

To see this in action we'll use a property named `grid-template-columns`.

Update the `.parent` CSS rule with the following:

```css
.parent {
  /* All other properties remain the same */
 
  grid-template-columns: 50% 50%;      /* Add this */
}
```

Save and refresh your browser.

![Grid items in a grid container](https://thepracticaldev.s3.amazonaws.com/i/cbu2jjqwstqnyuw7sxke.PNG)

In the previous code example we used percentages to set the column areas. CSS Grid defines an additional unit of measurement named the _Fraction unit_.

The _Fraction unit_ or `fr` represents a fraction of the available space in the grid container. It takes the total available space and distributes it in fractions. With this in mind we can rewrite our previous code as:

```css
.parent {
  /* All other properties remain the same */
 
  grid-template-columns: 1fr 1fr;  /* this will divide the grid into 2 columns */
}
```

Save your file and refresh your browser. You'll notice the output is the same.

As a takeaway, split the grid into _three columns_ using the `fr` unit. Your output should be similar to the image below.

![Grid items in a grid container](https://thepracticaldev.s3.amazonaws.com/i/75xa81wh038r458ybola.PNG)

There is another function that is used to control the size of rows and columns it is the `minmax()` function and __it's slightly more advanced__. The `minmax()` function allows us to declare the minimum and maximum width of a column.

###__Grid Track__
The word "track" in CSS Grid terminology is either the row or column this means "Row tracks" are horizontal and "Column tracks" are vertical.

From the image below the _"tomato"_ and the _blue boxes_ is the _Row track_. The _"tomato"_, _green_ and _brown boxes_ are the  _Column track_.

![Grid items in a grid container](https://thepracticaldev.s3.amazonaws.com/i/8i9vxgtmr4sll3et54rr.png)

###__Grid Area__
The rectangular area between four specified grid lines. Grid areas can cover one or more cells. Using the `grid-template-area` property on the grid container, grid areas allow us to define rectangular areas spanning one or more cells in the grid and give them a name. Then we can use those names to place items within the grid using the `grid-area` property on grid items.

Now update the `.parent` CSS rule to match the following:

```css
.parent {
  /* All other properties remain the same */
 
  grid-template-columns: 1fr 2fr 1fr; /* This will split the grid into three columns */
  grid-template-rows: auto 1fr;      /* This will split the grid into two rows */
}
```

Up next, we need to specify the `grid-template-areas`. The value that we'll supply to this property depends on the number of columns and rows we have in our grid. Let's see how it works.

```css
.parent {
  /* All other properties remain the same */

  grid-template-areas:
           /* column 1*/ /*column 2*/  /*column 3*/
/* row 1*/ "tomato       tomato        blue"
/* row 2*/ "yellow       yellow        blue";
}
```

Save your file and refresh the browser. Then _click_ _Display area names_ in the _Developer Tools_ this will display the area names on each grid item.

![Grid items in a grid container](https://thepracticaldev.s3.amazonaws.com/i/ye0ltkff3kg0nlrm5gdw.PNG)

The code snippet below will move the _first box_ (tomato) to the _"blue" area_.

```css
.child-1 {
  /* All other properties remain the same */
  
  grid-area: blue;
}
```

Save and refresh your browser.

![Grid items in a grid container](https://thepracticaldev.s3.amazonaws.com/i/z7n45wgjvvgqgcq084wb.PNG)

We can also make `child-3` span the _yellow area_.

```css
.child-3 {
  /* All other properties remain the same */
  
  grid-area: yellow;
}
```

The result in the browser.

![Grid items in a grid container](https://thepracticaldev.s3.amazonaws.com/i/303bl7so3l54rromc1po.PNG)

###__Grid Gap__
This is the empty space between grid tracks and it is commonly called _gutters_.

Add the following to the `.parent` CSS rule:

```css
.parent {
  /* All other properties remain the same */
  
  grid-gap: 1.2em;
}
```

The result in the browser.

![Grid gutters](https://thepracticaldev.s3.amazonaws.com/i/y480mbtl52w3xs37fwzu.PNG)

The `grid-gap` has two other related properties for declaring row and column separately they are:

* `grid-column-gap`
* `grip-row-gap`

You can also supply two values to the `grid-gap` and will serve as shorthand to the `grid-column-gap` and `grip-row-gap`. Take the example code below:

```css
.grid-item {
  grid-gap: 1em 2.2em;
}
```

<hr>
###__PLACING ITEM ON THE GRID__
One of the things that make CSS Grid such a powerful layout tool is it allows us to specify where on the grid any of the grid items should appear. Sounds awesome!.

The most basic ways for placing grid items on the grid is to declare the `grid-column` and `grid-row` values for each item. The `grid-column` and `grid-row` take values corresponding to the line on the grid. 

Update your  CSS  by __deleting__ the `grid-gap` and grid-`template-areas` __from all child elements__ and `.parent` then refresh your browser.

Your output should be similar to the image below.  In the image, I have enabled the _Display line numbers_ and the _Developer Tools_ is docked to the bottom of the page.

![Grid items in a grid container](https://thepracticaldev.s3.amazonaws.com/i/k3n0xsqenyqv41uy5zhr.PNG)

Let's move `.child-1`  (the _"tomato" colored box_) from its current location to the bottom right corner of the grid.

To get started, we have to note the number of columns and rows. In our grid, it's evident that we have _three columns_ and _two rows_.

First, we need to move the box to the _third column_:

```css
.child-1 {
  /* All other properties remain the same */

  grid-column: 3;
}
```

Save and refresh your browser.

![Grid items in a grid container](https://thepracticaldev.s3.amazonaws.com/i/rgw3ixqtr88exly037ng.PNG)

It is evident from the image above that we now have _three rows_ this happens because when we moved the box to the _third column_, the other boxes were pushed down and they could no longer be accommodated in the grid so the browser had to create another _grid line_ this line is called an _implicit line_.

> An implicit line is a line created by the browser when we place an item outside the existing row or columns

With the box at its current location, we are halfway to our desired location, now we need to move the box to the _second row_. You might be wondering: Why the _second row_ when we have _three rows_ now?

Remember the _third row_ is an _implicit line_ created by the browser if the grid items can fit into the grid this line will no longer exist.

To move the box we'll make use of the `grid-row` property with the new location of the box supplied as values. The location value have to be specified in a way that _might seem strange to you_ but the comments in the CSS code should help you understand.

```css
.child-1 {
  /* All other properties remain the same */

  grid-row: 2/3;  		/* This means row 2 column 3 */
}
```

Save and refresh your browser the box will be right we want it.

![Grid items in a grid container](https://thepracticaldev.s3.amazonaws.com/i/noqdjrjtl893pxtr2fui.PNG)

The following code snippet will move `.child-2` to the _second column_ in the _second row_.

```css
.child-2 {
  /* All other property remain the same */

  grid-column: 2;   /* Move to the second column */
  grid-row: 2/2     /* Move to the second row and place in the second column */
}
```

The result in the browser.

![Grid items in a grid container](https://thepracticaldev.s3.amazonaws.com/i/hyok9se7gy0ida47e0zy.PNG)

We can also make a grid item span more than one column by specifying the start and ending locations. The location are separated by a slash as demonstrated when we explained `grid-row`.

Now let's make `child-3` span three columns.

```css
.child-3 {
  /* All other property remain the same */

  grid-column: 1/4; 
}
```

Save and refresh your browser.

So far we've used numbers to specify our grid lines but there is another way called _Named lines_.

_Named lines_ serve as aliases to the column numbers declared in the grid container in our case the `.parent`. The _named lines_ are placed in square brackets before the template column values.

Add the following to the `.parent` CSS rule:

```css
.parent {
  /* All other properties remain the same */

  grid-template-columns: [line-one] 1fr [line-two] 2fr [line-three] 1fr [line-end];
}
```

Now let's move `child-4` using the new _named lines_.

```css
.child-4 {
  /* All other properties remain the same */
 
  grid-column: line-one/line-three;  /* This is equivalent to grid-column: 1/3;*/
}
```

Save and refresh your browser. You will realize that `.child-3` (_the yellow box_) will span _three column_ and move back to its original position in the grid.

![Grid items in a grid container](https://thepracticaldev.s3.amazonaws.com/i/vghcwm4xzhlkuq0w3tnl.PNG)

Mind you the last box is at the bottom because `child-3` is spanning _three columns_ at the top of the grid and `child-4` is now spanning _three columns_ as well which will push the _boxes_ further away so the browser had to create an implicit line to accommodate the last box.

 If you __delete__ the `grid-column` property and value of `.child-3`  and `.child-4` the implicit line will cease to exist and the grid item will snap into their position.

There is also another keyword that you should be aware of and its called `span`, we can use it in the `grid-column` and `grid-row` properties to indicate how many columns or rows a grid item should span. The syntax is straight forward:

```css
.grid-item {
  grid-column: 2 span;   /* the grid item will span 2 columns */
}

.grid-item {
  grid-column: 2/3 span; /* the grid item will span two columns from line 2 to 3  */
}
```

Go ahead and experiment with it.

<hr>

In the [next part](https://dev.to/ziizium/css-grid-part-2-3bna), we'll pick up where we left off and discuss how we can align items in a CSS Grid.