# Beginner's Guide to CSS Grid

## What is Grid?

**Grid** is a new CSS layout module created to support a two-dimensional layout system.

---

## How to use it

### Define Container

To start using CSS Grid, **create** a div element within the HTML, then **define** that element to be a **grid** container within the CSS. This sets the elements inside of the container to be the child elements directly affected by the grid settings. Keep in mind that default configurations have already been set at this point.

```xml
<div class="container">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
</div>
```

```css
.container {
    display: grid;
}
```

### Define Templates

Next, define columns and/or row **templates**. Columns lay the elements *horizontally*, and rows lay the elements *vertically*. These values are *space-separated* and represent the track (width, length) size of the child elements.

```css
.container {
    grid-template-columns: none; /** Default */
    grid-template-rows: none; /** Default */

    grid-template-columns: auto 150px;
    grid-template-rows: auto min-content;
    grid-template-rows: auto 150px;
    grid-template-rows: 1fr 1fr;
    grid-template-rows: repeat(2, 1fr);
}
```

Here are examples of defining a template for **columns**.

These are some of the most commonly used size **properties**:

* `fr` unit represents a fraction of the available space in the grid container
    
* `auto` sets the size based on the content that is inside them
    
* `{number}px` defines a static size of the element
    
* `repeat()` notation can be used to repeat all of a section of the track listing
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1739812623140/02ba22cd-1db7-4670-8457-39f0a7fdc70f.png align="center")

Here are example use cases for **row** templates.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1739812646041/405fce3a-66c9-43e6-a5a6-a377820cf48a.png align="center")

### Gaps

Now that you have the basic layouts, consider configuring **gaps** next. Gaps can be set at the row or column level, and they define the spaces between the child elements. The default value for both is 0.

```css
.container {
    column-gap: 10px;
    row-gap: 10px;
}
```

Consider the following examples. The first example has 3 elements laid out horizontally (`grid-template-columns`). Notice that there are 10 pixels of space between the 1st and the 2nd element, as well as the 2nd and the 3rd element. These gaps are added between all of the child elements. In the second example, the elements are laid out vertically (`grid-template-rows`) and the gaps are set to 10 pixels by rows, as the vertical spaces between the 2 elements indicate.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1739812667519/812fc169-96fb-46d3-b477-30d84cca16a1.png align="center")

### Justifications

A couple more to go. Configuring **justifications**. This setting allows you to set the *horizontal* location of the child elements. Let's look at a common use case.

```css
.container {
    justify-content: center;
}
```

As you can see below, the child element with 50 pixels width is set in the center of the container not taking any extra space.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1739812687537/0cf9796c-a008-4a97-a7bb-24e033f2a85f.png align="center")

### Alignment

Almost done. Lastly, you can also configure alignments. This is very similar to justifications with a few differences. Alignments allow the *vertical* location of the child elements to be set. Let's try a common use case once again: `center`.

```css
.container {
    align-items: center;
}
```

In the final example below, you can see that the height of the element is set at 50 pixels and the container is set to 200 pixels. Because of the align-items property, the child is centered in the container.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1739812718587/8f7137ae-de0b-4e37-8f9c-64d8f3b35e62.png align="center")

---

### Explore

Now that you've learned the basics, try them out in your projects! As you test them locally, you can use Chrome DevTools to inspect and CSS Grid! Here is a [guide](https://developer.chrome.com/docs/devtools/css/grid/) to doing just that! Consider checking out some of the links below as well. Thanks for reading!

---

### Learn more about Grid

* [CSS Tricks - A Complete Guide to CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
    
* [Mozilla - CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/grid)