Как добавить элементы в сетку пользовательского интерфейса Semantic React?

Question

Я использую семантический интерфейс реагирования.Я хочу добавить панель поиска в сетке.Панель поиска должна занимать почти всю ширину (см. Скриншот 2).

Панель поиска должна располагаться рядом с существующей боковой панелью.В настоящее время я могу добавить панель поиска рядом с боковой панелью, но ширина боковой панели не увеличивается, почему так?Я хочу, чтобы строка поиска имела полную ширину, т.е. до конца правой стороны экрана.

Код:

export default class DashBoard extends Component {

  render() {

    return (
      <div className={styles.container}>
        <Grid stackable columns={3}>
        <Grid.Row>
          <Grid.Column className={styles.sideBar} width={3}>
            <Segment className={styles.sideBarContent}>
                <Header as='h3' className={styles.sideBarHeader}>DashBoard</Header>
                <Header as='h3' className={styles.sideBarHeader}>Donations</Header>
                <Header as='h3' className={styles.sideBarHeader}>Events</Header>
                <Header as='h3' className={styles.sideBarHeader}>Reports</Header>
                <Header as='h3' className={styles.sideBarHeader}>Profile</Header>
                <Header as='h3' className={styles.sideBarHeader}>Donor Intelligence</Header>
            </Segment>
          </Grid.Column>
          <Grid.Column width={5}>
            <div className={styles.searchBar}>
               <Search size='big'/>
            </div>
            <Segment className={styles.piechartContent}>
              <PieChart width={250} height={300}/>
            </Segment>
            <Segment className={styles.multilinechartContent}>
              <MultilineChart width={350} height={325}/>
            </Segment>
          </Grid.Column>
          <Grid.Column width={5}>
            <Segment className={styles.barchartContent}>
              <BarChart width={475} height={375}/>
            </Segment>
            <Segment className={styles.donutchartContent}>
              <DonutChart width={375} height={325}/>
            </Segment>
          </Grid.Column>
          <Grid.Column width={2}>
            <Card className={styles.card1}>
              <Card.Content>
                <Card.Header className={styles.cardHeader1}>£93,300.56</Card.Header>
                <Card.Description className={styles.cardDescription1}>Remittances - All Time</Card.Description>
              </Card.Content>
            </Card>
            <Card className={styles.card2}>
              <Card.Content>
                <Card.Header className={styles.cardHeader2}>53</Card.Header>
                <Card.Description className={styles.cardDescription2}>Parishes / Churches</Card.Description>
              </Card.Content>
            </Card>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    </div>
    )
  }
}

Снимки экрана:

Снимок экрана 1:

Answer 1

Вам нужно два столбца, а внутри основного столбца вам нужно два ряда.(Многие не нуждаются в двух фактических элементах строки, если все правильно обернуто, но это может помочь сделать структуру более понятной для использования строк.)

 _______________________________
|         | ___________________ |
|         || row w/ 1 col      ||
|         ||___________________||
|         | ___________________ |
|         ||         ||        ||
|         || row w/  ||        ||
|         || 2 cols  ||        ||
|         ||         ||        ||
|         ||         ||        ||
|         ||_________||________||
 _______________________________
    ^-- sidebar col
                     ^-- main col