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

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

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.