How it works...

Let's take a closer look at the Container and Item components:

const Container = props => <Grid container {...props} />;
const Item = props => <Grid item {...props} />;

The Container component renders a Grid component with the container property set to true, and the Item component does the same, except with the item property set to true. Each component passes any additional properties to the Grid component, such as xs and sm breakpoints.

When you have lots of Grid containers and items that make up your layout, being able to see the difference between <Container> and <Item> elements makes your code that much easier to read. Contrast this with having <Grid> elements everywhere.