为什么Grid.Column在Grid.Row中是水平的？

Question

我正在尝试模拟一个人造新闻网站来学习语义 - 网格。我试图将一行垂直划分为2个较小的列，但它们水平分割并且行为更像行。如何将行分为两个垂直列？

到目前为止，我的布局是一行分为2列（工作正常）。第二列我已分成2行（也可以正常工作）。当我想将这些行中的一行划分为2列时，事情就变得很糟糕了。

样式是用于可视化，因为我只是布置空盒子，因为它没有真正的内容，因为它只是一个布局。

    <Grid.Row>
      <Grid.Column
        width="11"
        style={{ height: "500px", border: "2px solid black" }}
      />
      <Grid.Column
        width="5"
        style={{
          border: "1px solid black",
          padding: "0"
        }}
      >
        <Grid.Row style={{ height: "50%", border: "1px solid black" }}>
          <Grid.Column
            width="8"
            style={{ height: "50%", border: "1px solid black" }}
          />
          <Grid.Column
            width="8"
            style={{ height: "50%", border: "1px solid black" }}
          />
        </Grid.Row>
        <Grid.Row style={{ height: "50%", border: "1px solid black" }} />
      </Grid.Column>
    </Grid.Row>

第二列中的第一行被分割，但是按预期分成2个水平而不是垂直.screenshot of inspctor

Answer 1

这样的事情将帮助您实现目标：

<Grid columns={2}>
  <Grid.Row>
    <Grid.Column style={{ height: "500px", border: "2px solid black" }} />
    <Grid.Column style={{ border: "1px solid black" }} stretched>
      <Grid columns={2} stretched>
        <Grid.Row>
          <Grid.Column style={{ border: "1px solid black" }} />
          <Grid.Column style={{ border: "1px solid black" }} />
          <Grid.Column width={16} style={{ border: "1px solid black" }} />    
        </Grid.Row>  
      </Grid>
    </Grid.Column>
  </Grid.Row>
</Grid>

正如您所看到的，您可以将其他Grid添加到第二列中。使用正确的道具，您甚至不需要指定高度（如可见）。

看到它在这里工作：https://codesandbox.io/s/nkkmzl3lz0