如何在语义反应ui网格中添加元素?

我正在使用react语义ui。我想在网格系统中添加一个搜索栏。搜索栏应该几乎占据整个宽度(参见屏幕截图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: