Why are Grid container & item the same component?

As you all know, the grid component consists of two parts - one with the container prop which is the container for grid items with the item prop. My question is, why? It makes the code messier, it makes the docs harder to understand and to read the API methods, and the most important thing is that it’s combining two elements that are separate into one element. That’s like making Card’s CardContent and CardAction into <Card actions>, <Card content> and <Card container>. I don’t see who benefits from Grid being one component with two different behaviours.

[zachwolf]

This has always made me curious, but your explanation makes sense.

My experience so far tells me that the average use case doesn’t mix container and item props. With that in mind, there could be an easy “best-of-both-worlds” approach. MUI could provide named components that just wrap Grid. Something like:

// src/Grid/Container.js
import React from 'react'
import Grid from './Grid'

export default function Container (props) {
  return (
    <Grid container {...props} />
  )
}

Thoughts? If you think it’s a decent idea, I’d be happy to make the PR. The docs would need to be updated as well in order to add clarification. Maybe that would be a good time to add an example of a layout using both container and item.

[zachwolf]

Thanks @oliviertassinari! Would it be appropriate to reopen this issue?