CSS Grid part 2
Tags: beginners, css
Published: 2019-11-27 20:43:44

---
title: CSS Grid part 2
published: true
description: A beginners introduction to CSS Grid
tags: beginners, css
series: FrontEnd Development Zero to Hero
---
This post is the second part of [_CSS Grid part 1_](https://dev.to/ziizium/css-grid-part-1-3f57). If you've not read the post I'll encourage you read it before proceeding with this post.


{% link https://dev.to/ziizium/css-grid-part-1-3f57 %}

__All code snippets remain the same unless otherwise stated.__

<hr>

###__ALIGNING ITEMS ON THE GRID__
Similar to Flexbox _grid items_ can be aligned. In this section we will talk about properties that make this possible and in the next section we'll see how we can _pack_ __all the grid items__ to a specific location on the grid.

The properties for aligning items are as follows:
* `justify-items`
* `justify-self`
* `align-items`
* `align-self`

These properties accept the following values:
*  `auto`
* `normal`
* `start`
* `end`
* `center`
* `stretch`
* `baseline`
* `first baseline`
* `last baseline`

###__`justify-items`__
The name of this property says it all, if you've used a word processor like _Microsoft Word&trade;_ you should already have an idea of how this property will behave.

This property is applied on the grid container itself and it can be used to move all the grid items along the grid row.

The HTML code remains the same but you'll have to clean up your CSS until you are left with bare bones code and let it match the snippet below. _Take note of the minor additions and read the comments_. 

```css
.parent {
  display: grid;
  width: 70%;
  outline: 5px solid #dddddd; /* Just a cosmetic to note the edge of the grid */ 
  margin: 0 auto;
}

/*
 * We are using a attribute selector to select all
 * child boxes
*/
[class ^= "child"] {
  width: 100px;              /* TAKE NOTE we have reduce 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 */
}

.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;
}
```

Save and refresh your browser.

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

From the image above, please note the following:

* The browser zoom level has been reduced to `67%` so that we can get a better view when the grid items are aligned. If you are on _Microsoft Windows&trade;_ you can use the keyboard shortcut __`Ctrl`__ and __`+`__ or __`-`__ to reduce or increase the zoom level
* I have enabled the grid lines
* The _Developer Tools_ is docked to a separate window.

Back to your code editor and update the `.parent` with the following:

```css
.parent {
  /* All other properties remains the same */
  
  justify-items: center;  /* Add this */
}
```

Save and refresh your browser.

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

How about we move them to the end of the grid? Update your code:

```css
.parent {
  /* All other properties remains the same */
  
  justify-items: end;  /* Add new value */
}
```

The result in the browser.

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

If you use `justify-item: stretch;` items will be stretched across the row axis. This is the default value for `justify-item`. Apply the `stretch` value and refresh your browser, the grid items will return back to their default position and won't span the entire row because our grid items have a fixed width of `100px`.

###__`justify-self`__
The `justify-self` property can be applied to a __single__ grid item.

__Delete__ the `justify-items` property from the `.parent` then add the following to `.child-3`:

```css
.child-3 {
  /* All other properties remains the same */
  
  justify-self: center;  /* Add this */
}
```

Save and refresh your browser.

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

The snippet below will move the last box (`.child-6`) to the end of the grid row.

```css
.child-6 {
  /* All other properties remains the same */
  
  justify-self: end;  /* Add this */
}
```

The result in the browser.

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

###__`align-items`__

This property is used to align items on the column axis i.e vertically

Comment three boxes from your HTML file, preferably `child-3`, `child-4`, `child-6` and __delete__ any `justify-*` code from the child elements then update the `.parent` CSS rule with the following:


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

  height: 800px;  /* Add this */
}
```

Save and refresh your browser.

![Grid items in the grid](https://thepracticaldev.s3.amazonaws.com/i/7wj4si008msizwo4bjem.PNG)

Now, lets align the item to the end of the column.

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

  align-items: end; /* Add this */
}
```

The result in the browser:

![Grid items in the grid](https://thepracticaldev.s3.amazonaws.com/i/jtyf2b3uha214gd4nzgw.PNG)

The following snippet will align the items to the center of the column.

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

  align-items: center; /* New value */
}
```

The result in the browser:

![Grid items in the grid](https://thepracticaldev.s3.amazonaws.com/i/aqhuvz40qtl9jo7mwl2j.PNG)

The default value is `align-start`.

_If you feel the boxes are not moving comment another child `div` in your HTML and start again._

<hr>

Placing an item at the center of the column and row axis is sometimes a daunting task and before CSS Grid developers had to use the `margin` property to get the job done. With CSS Grid this is super easy.

In CSS Grid all you have to do is use the combination of `align-items` and `justify-items` on the grid container with a value of `center` for both properties.

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

  /* Use both properties at once */
  align-items: center;
  justify-items: center;
}
```

Save and refresh.

![Grid items in the grid](https://thepracticaldev.s3.amazonaws.com/i/8inq46mwomdk8vg75g21.PNG)

If you have just one child element in the grid you will see the true beauty of this technique.

![A grid item aligned to the center](https://thepracticaldev.s3.amazonaws.com/i/41vom5re7pi3zm9ydc0g.PNG)

###__`align-self`__

This is analogous to `justify-self` and it used to align a __single item__ along the column axis.

Make sure you have no `align-items` or `justify-items` in your `.parent` then add the following to `child-2`:

```css
.child-2 {
  /* All other properties remains the same */


  align-self: end; /* Add this */
}
```

Save and refresh your browser.

![A grid item aligned to the center](https://thepracticaldev.s3.amazonaws.com/i/re2pjj3edt757meiedq4.PNG)

In the image above the  _green box_ is obstructing the _blue box_ from moving to the end of the grid container, try _commenting the HTML code_ for the _green box_ and refresh your browser.

![A grid item aligned to the end of a column](https://thepracticaldev.s3.amazonaws.com/i/686rb0scz5dbncquvnia.PNG)

###__ALIGNING TRACKS ON THE GRID__

Grid tracks can be aligned relative to the grid container along the row and column axes.

Two properties are used for this:
* `align-content` - aligns tracks along the column axis
* `justify-content` - align tracks along the row axis

They accept similar values like previous properties with three additions:

* `space-around`
* `space-between`
* `space-evenly`

Let's start.

We'll be applying the properties to the `.parent` element, so if you have code in the `.parent` and any child element from previous section please __delete them__.

Add the following to the `.parent`:

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


  justify-content: end; /* Add this */
}
```

Save your file and refresh your browser.

![Grid items aligned to the end of a grid row](https://thepracticaldev.s3.amazonaws.com/i/yamrh7tyzc1lvmd82n2h.PNG)

To demonstrate the `space-*` family of properties, we'll have to make some changes to our HTML and CSS.

Perform the following steps

* __Delete__ the `justify-content:end;` from the `.parent`
* Remember we commented three boxes in the HTML from previous section, remove the comment, now we will have our _six_ boxes back.
* Add `grid-template-areas` to the `.parent` CSS with the following values
     * `"h1 h2" "h3 h4" "h5 h6"`
* Add `grid-gap: 1.2em` to `.parent`

Now it's time for some action.

The code below will align all the element to the center of the container. Don't forget to save.

```css
.parent {
  /* All other properties remains the same 
   * including the grid-template-areas and grid-gap that you just added
  */

  justify-content: center; /* Add this */
}
```

The result in the browser.

![Grid items aligned to the center of the grid](https://thepracticaldev.s3.amazonaws.com/i/1pxanaw4qxnktua3oy4z.PNG)

The subsequent images are for `space-around`, `space-between` and `space-evenly`

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/jzzo8wu7pcbz5kmzecgy.PNG)
<figcaption>justify-content: space-around;</figcaption>

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/thaara1k01qrbiac7a67.PNG)
<figcaption>justify-content: space-between;</figcaption>

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/gyyr7fkwbw0ux6kayqny.PNG)
<figcaption>justify-content: space-evenly;</figcaption>

That's it for `justify-content`, up next `align-content`.

<hr>

`align-content` aligns items on the column axis (vertical) which is opposite of how `justify-content` align content in horizontal direction.

If you have `justify-content` in your `.parent`, please __delete them__ and add the following:


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

  align-content: end; /* Add this */
}
```

The result in the browser.

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

I'll leave you to have fun with the following values:

* `start`
* `space-around`
* `space-evenly`
* `space-between`
* `center`

Save your files before trying each value.

We've come long way in CSS Grid, but _we have certainly not covered everything_ but this is enough to get you started.

Our next topic has to do with devices and screens; _Media Queries_.