React: Render multiple components without a wrapping element

I haven't found a duplicate issue, only this post https://groups.google.com/forum/#!searchin/reactjs/render$20multiple/reactjs/pHNJe8trFOg/J-zd4jxAkJ4J

I have a valid use case and like to share it.

I'm building a framework for storytelling based on react. Every single element is positioned fixed as I've written a custom layout engine and need full control over everything. My entry level structure looks something like this

<Story>
    <Grid />
    <UI />
</Story>

<Grid> renders all the actual items (<GridItem>) of the story (text, images, videos, etc.). <UI /> renders UI elements that are common to every story. For example a <VolumeControl> for controling the volume of audio/video items.

If I'd render the structure as given above, this would be the result

<div>
    <div>
        <!--list of GridItems-->
    </div>
    <div>
        <!--list of UI components-->
    </div>
</div>

Since everything is positioned fixed, this does not work. The UI layer covers everything, making it unusable (e.g. can't click on videos). That's why I'm currently forced to do the following in the render method of Story

<div>
    <Grid />
    <VolumeControl />
    <Navigation />
    <ShareButtons />
</div>

This works but is ugly as I lose separation. I don't want the Story component to have to know about every UI component. Sth. like a virtual <Fragment> component that renders it's children without a wrapper element would solve the problem as I could return it from the <UI> component.

I know this is a rare use-case, I'm rather talented at reaching the edge cases of every framework I touch.

Funny how writing down these things sometimes magically makes your brain do useful stuff. I found another workaround. I'm using visiblity:none on the UI layer and visibility:visible on the UI components. But it's a hack, nothing more.