<Fragment> breaks <GridList> and <GridListTile> layout

[murray-lang]

When GridListTiles are wrapped in Fragment their layout is broken

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Wrapping multiple GridListTile elements in a Fragment results in row and column layout being broken.

Expected Behavior 🤔

GridList and GridListTile layout should not be affected by Fragment

Steps to Reproduce 🕹

https://codesandbox.io/s/fragment-breaks-gridlisttile-96xtn

Context 🔦

I am using GridList as a convenience for tabular layout of data with headers for both rows and columns. Because the row header configuration comes from different state to the item values, the row cannot be rendered with a single Array.map(), so I tried to wrap the row items in a Fragment.

I am currently getting around the issue by joining the header and item configuration arrays into one, with a className property added to each object so that the appropriate style can be determined in the rendering JSX.

Your Environment 🌎

| Tech | Version |
| Linux Mint | 19.2 |
| Material-UI | v4.8.3 |
| React | 16.12.0 |
| Browser | Chrome v79.0.3945.88 (64bit) |

[eps1lon]

Thanks for opening this issue and providing a reproduction.

This is expected behavior. For more information see the console warning.

Tip: for conditional logic, you can provide an array.

[darkdragn]

@eps1lon This is awesome information about something that been bugging me for hours. Is there any way we can add this to the documentation? Just in case someone else runs into this.

I know I dug through the docs for hours and saw no mention of passing an array for conditional logic, so I was searching for how to ensure components in Fragments inherit styles... I know now, that sounds stupid and I was barking up the wrong tree.

[oliviertassinari]

@mbrookes is solving this issue in #22395 by using the React context and CSS grid.