Add a convenience component for generating <Row><Col/></Row>

[AriTheElk]

Since this is a flexbox system, it's required that the object inside the Row has proper flex properties, or it could be rendered incorrectly. This is why it's always best to the use only the Col component inside the Row component.

This causes a lot of extraneous code, as if we want to make a single-column Row, we have to type it out like

<Row>
  <Column>
    <h1>This is a column that's centered using the shift props</h1>
  </Column>
</Row>

furthermore, nesting becomes a nightmare

<Row>
  <Column>
    <Row>
      <Column>
        <h1>This is a column that's centered using the shift props</h1>
      </Column>
    </Row>
  </Column>
  <Column>
    <Row>
      <Column>
        <h1>This is a column that's centered using the shift props</h1>
      </Column>
    </Row>
  </Column>
</Row>

I think it could be beneficial if there was a component along the lines of RowCol, that would generate both of them, so the above examples could be done with

<RowCol>
  <h1>This is a column that's centered using the shift props</h1>
</RowCol>

and

<Row>
  <Column>
    <RowCol>
      <h1>This is a column that's centered using the shift props</h1>
    </RowCol>
  </Column>
  <Column>
    <RowCol>
      <h1>This is a column that's centered using the shift props</h1>
    </RowCol>
  </Column>
</Row>

It would be able to accept all the props that Col accepts, and it passes the props directly to the Col component. This will speed up rendering for these types of object, as the Row won't have to loop through it's children applying the correct props.

This is not a final sketch of the idea, and I would like to continue discussing and adding to this idea.

[0x80]

Maybe in line with the proposed Container/Box replacing Row/Column, you could call the component ContainedBox