[Solved]-React-Semantic-UI Cards with Pinterest Layout-Reactjs

.masonry.grid {
  display: block;
}

@media only screen and (min-width: 768px) {
  .masonry.grid {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    -webkit-column-gap: 0;
       -moz-column-gap: 0;
            column-gap: 0;
  }

  .ui.doubling.masonry.grid[class*="three column"] > .column {
    width: 100% !important;
  }
}

@media only screen and (min-width: 992px) {
  .masonry.grid {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;
  }
}

<Grid columns={3} stretched>
  <Grid.Column>
    <Card style={{ height: '30px' }} />
    <Card style={{ height: '55px' }} />
    <Card style={{ height: '70px' }} />
  </Grid.Column>
  <Grid.Column>
    <Card style={{ height: '55px' }} />
    <Card style={{ height: '30px' }} />
    <Card style={{ height: '70px' }} />
  </Grid.Column>
  <Grid.Column>
    <Card style={{ height: '55px' }} />
    <Card style={{ height: '70px' }} />
    <Card style={{ height: '30px' }} />
  </Grid.Column>
</Grid>