The biggest win I've noticed from CSS Grid so far has been from `grid-template-areas`. (The `grid-column` and `grid-row` syntax used in the article is kind of an alternate way to spell this, but I prefer using the `area` properties.)

Ever been given mockups where the mobile design moves stuff all around into a different order? That has traditionally been extremely difficult to handle with CSS given identical, unchanging markup.

With CSS Grid you just give each of your components a `grid-area` name, and then you just tell the grid where those areas go at different breakpoints.

So on mobile you might have 4 components laid out in a single column:

    grid-template-areas:
      'breadcrumbs'
      'filters'
      'sort'
      'products';

And using a @media query, a more traditional desktop layout (and add a `categories` area):

    grid-template-areas:
      'breadcrumbs breadcrumbs  sort'
      'categories  products products'
      'filters     products products'
      '.           products products';

I love it because not only is the above a list of the subcomponents that make up this component, but it's also a visual indicator of how they'll be laid out.

Now all the subcomponents need to do is define their `grid-area`, they don't need to adjust their own layout at the different breakpoints.