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

Question

我正在尝试模拟一个人造新闻网站来学习语义-ui 网格。我试图将一行垂直划分为 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>

正在分割第二列的第一行，但不是预期的垂直分割而是水平分割。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>

如您所见，您可以通过将另一个网格嵌入第二列来使其工作。使用正确的道具，您甚至不需要指定高度（可见）。

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

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

Why is Grid.Column horizontal iniside Grid.Row?

reactjs

semantic-ui

semantic-ui-react