# CSS Grid Container

Yesterday we had the first touch with `CSS` Grid. Today we will be diving more into the container part of the grid.

The container is the outer wrapper, and much like `flex` it has some awesome properties we can leverage.

You must think of the container is the element where you define your layout structure.

## HTML Structure

In today's example we will be working with a three column, two row layout.

```html
<div class="grid">
  <!-- Row 1 -->
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <!-- Row 2 -->
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
```

## Grid Container

So let's start by making our container a grid:

```css
.grid {
  display: grid;
  grid-template-columns: auto auto auto;
}
```

We define our columns layout and tell it to make three evenly spaced columns.

### Grid Gaps

Let's add some gaps because these make it easier to see what's happening.

We can add a allround gap (column and row) or the separate ones.

```css
.grid {
  grid-gap: 1em; // Around
  grid-column-gap: 1em; // Columns
  grid-row-gap: 1em; // Rows
}
```

By default, the gaps are off (not existing)

### Different Column Setup

We can also change the column setup to be variant like this:

```css
.grid {
  display: grid;
  grid-template-columns: 20px auto 100px;
}
```

The auto will fill to 100% setup.

### Grid Rows

As we've seen now we are only defining the columns so rows will be made automatically, but we can influence them like so:

```css
.grid {
  display: grid;
  grid-template-rows: 80px 200px;
}
```

You can see the above in the following Codepen.

%[https://codepen.io/rebelchris/pen/pogOZZX]

### Grid Alignments Justify-content

To align the grid, we can use several awesome functions:

Let's start with `justify-content`. This property will align on the horizontal axis.

Space the items evenly:

```css
.grid {
  display: grid;
  justify-content: space-evenly;
}
```

Give them space around:

```css
.grid {
  display: grid;
  justify-content: space-around;
}
```

Give them space between them

```css
.grid {
  display: grid;
  justify-content: space-between;
}
```

Center the elements

```css
.grid {
  display: grid;
  justify-content: center;
}
```

Move all blocks to the start

```css
.grid {
  display: grid;
  justify-content: start;
}
```

Or to the end

```css
.grid {
  display: grid;
  justify-content: end;
}
```

Have a play with this Codepen.

%[https://codepen.io/rebelchris/pen/QWyVBzP]

### Grid Alignments Align-content

That was the horizontal axis, but we can also influence the vertical axis by using the `align-content` property.

Space the items evenly:

```css
.grid {
  display: grid;
  align-content: space-evenly;
}
```

Give them space around:

```css
.grid {
  display: grid;
  align-content: space-around;
}
```

Give them space between them

```css
.grid {
  display: grid;
  align-content: space-between;
}
```

Center the elements

```css
.grid {
  display: grid;
  align-content: center;
}
```

Move all blocks to the start

```css
.grid {
  display: grid;
  align-content: start;
}
```

Or to the end

```css
.grid {
  display: grid;
  align-content: end;
}
```

Play around with the following Codepen.

%[https://codepen.io/rebelchris/pen/KKVxxPP]

### Perfectly Centered Grid

Ofcourse we can combine the two, let's make a centred grid:

```css
.flex {
  display: flex;
  align-content: center;
  justify-content: center;
}
```

You can see this on the following Codepen.

%[https://codepen.io/rebelchris/pen/pogOOov]

## Browser Support

CSS Grid has support from all major browsers, we have some issues in IE, but they can be [Polyfilled](https://github.com/FremyCompany/css-grid-polyfill).

![CSS Grid support](https://caniuse.bitsofco.de/image/css-grid.png)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)