Почему Grid.Column находится внутри Grid.Row? - PullRequest
Новая
       9

Почему Grid.Column находится внутри Grid.Row?

0 голосов
/ 07 апреля 2019

Я пытаюсь создать макет поддельного новостного сайта, чтобы изучить сетку семантического интерфейса. Я пытаюсь разделить строку по вертикали на 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 по горизонтали, а не по вертикали, как ожидалось. снимок экрана вдохновителя

1 Ответ

0 голосов
/ 07 апреля 2019

Нечто подобное поможет вам в достижении вашей цели: 

<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

...