# CSS Grid Series: 5 - grid-auto-flow Explained

> Live dev notes taken throughout the CSS Grid course by Wesbos — cssgrid.io

By default, when the number of items exceed the explicitly defined tracks, those items get tacked onto the next row. This means by default:

```
grid-auto-flow: row
```

If we want the exceeded items to flow over into a new columns, we can follow the process of:

1. Define your explicit columns using `grid-template-columns`
2. Change the direction of the auto-flow to columns, i.e. `grid-auto-flow: column;`
3. (Optional) Define the auto width of the columns, i.e. `grid-auto-columns: 200px;`

---

Below is the addition of 3 items, now implicitly defined:

```
<style>
    .container {
        display: grid;
        grid-gap: 20px;
        grid-template-columns: 200px 400px;
        grid-auto-flow: column;
    }
</style>

```

![2021-04-11_18h14_24.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1618656712063/wiBeDEY_d.png)

*Above: Implicit columns automatically resize to fill the rest of the window*

--- 

Below is the addition of 3 items, now sized when exceeds the explicitly defined columns:

```
<style>
    .container {
        display: grid;
        grid-gap: 20px;
        grid-template-columns: 200px 400px;
        grid-auto-flow: column;
        grid-auto-columns: 200px;
    }
</style>
``` 

![2021-04-11_18h20_33.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1618656722743/VFpJGqz_9.png)

*Above: The defined auto width of the columns has enabled the horizontal scrolling behaviour*

> If `grid-auto-columns` wasn't defined, the width of the items would stretch to auto-fill the end of the page and become responsive when the window is resized.

> Also note that the responsive resizing shrinks to the content within the grid item. When it reaches beyond the limit, the window becomes scrollable.