Surprising behaviour when nesting Row in Row

[djtango]

When nesting Row in Row, they are aligned as columns:

<Grid>
  <Row size={80}>
    <Row>  {/* these 3 inner Rows will appear as columns */}
    </Row>
    <Row>
    </Row>
    <Row>
    </Row
  </Row>
  <Row size={20>
  </Row>
</Grid>

I assume this is due to the underlying flexbox implementation. I also assume that columns nested in columns will behave as rows. (Not verified).

So, I know you can simply specify all your rows at the same level of nesting, but what if you have a component which you know will occupy 80% height, and then inside an unrelated component, you want to specify customised Rows? Child components should not need to be aware of the parent component dimensions.

[LoriKarikari]

I'm having the same issue. Currently I nest a Col in a Row and in that Col other Cols to get the nested Rows.

[roffelund]

A quick fix is nesting a new Grid in the row in or col.

<Grid>
  <Row>
    <Grid>
      <Row>
      </Row>
      <Row>
      </Row>
    </Grid>
  </Row>
  <Row>
    <Grid>
      <Row>
      </Row>
      <Row>
      </Row>
    </Grid>
  </Row>
</Grid>

[smooJitter]

Why is this a bug? Doesn’t @roffelund solution work? I actually prefer nesting grids because it friendlier to composed layouts.

Nevermimd, if we can nest columns in rows and rows in columns, it makes sense to nest rows in rows.

[Timunas]

Hello, I have the following code.

Code

Styles

The first 3 rows are ok. Meaning that the row as 3 columns (40%, 40%, 20%) The last row I was expecting to be separated like (50%,50%).

And it is but the problem is that I can't center the buttons inside the columns. as in the other rows.

What am I missing?