使用语义UI反应无法获得偶数行和列的图像卡

Question

我在使用Semantic-ui-react时遇到了麻烦，并且在SUIR站点上的Grid示例中使图像卡在漂亮的整齐的列和行中呈现。 这是我的App至AnimalContainer至AnimalCard的代码：

应用程序：

render() {
   console.log(this.state)
   return (

     <Grid>
       <Grid.Column width={1}>
       </Grid.Column>
       <Grid.Column width={14}>

     <HeaderContainer currentUser={this.state.currentUser} animals={this.state.animals} handleOpenModal={this.handleOpenModal}  />
     <Switch>
     <Route path="/users" render={(routerProps) => <UsersContainer users={this.state.users} {...routerProps}/>}/>
     <Route path="/currentUser/:id" render={(routerProps) => <UserProfile currentUser={this.state.currentUser} updateProfile={this.updateProfile}
             deleteProfile={this.deleteProfile} {...routerProps}/>}/>
       <Route path="/login" render={(routerProps) => <LoginForm login={this.login} {...routerProps}/>}/>
       <Route path="/logout" render={this.logout}/>
       <Route path="/signup" render={(routerProps) => <SignupForm signup={this.signup} avatars={this.state.avatars} {...routerProps}/>}/>
       <Route path="/animals" render={(routerProps) => <AnimalsContainer animals={this.state.animals} {...routerProps}/>}/>
       <Route path="/home" render={(routerProps) => <SightingsContainer sightings={this.state.sightings} handleOpenModal={this.handleOpenModal} editSighting={this.editSighting}
          likeSighting={this.likeSighting}  users={this.state.users} animals={this.state.animals} deleteSighting={this.deleteSighting}
           addComment={this.addComment}  currentUser={this.state.currentUser}{...routerProps} />}/>

       <Route path="/postSighting" render={(routerProps) => <PostSightingModal currentUser={this.state.currentUser} animals={this.state.animals} postSighting={this.postSighting}
        editSighting={this.editSighting} openModal={this.state.openModal} closeModal={this.handleCloseModal} {...routerProps}/>}/>


     </Switch>
     </Grid.Column>
     <Grid.Column width={1}>
     </Grid.Column>
     </Grid>
   )
 };
};

AnimalContainer：

import React from 'react';
import { Grid } from 'semantic-ui-react'
import AnimalCard from '../components/AnimalCard'


const AnimanlContainer = props => {


  return (

      <div>

        {props.animals.map((animal, idx) => {
         return <AnimalCard key={idx} animal={animal} />
        })
      }
      </div>

  )
};

export default AnimanlContainer

动物卡：

import React, { Component } from 'react';
import { Card, Image, Grid, Segment } from 'semantic-ui-react'

class AnimalCard extends Component {

  render() {

    return (



      <Card.Group centered>
      <Card>
      <Card.Content>
      <Image src={this.props.animal.image} />
      <Card.Header>name:{this.props.animal.gname}</Card.Header>
      <Card.Description>phylum:{this.props.animal.phylum}</Card.Description>
      <Card.Description>order:{this.props.animal.order}</Card.Description>
      <Card.Description>family:{this.props.animal.family}</Card.Description>
      <Card.Description>species:{this.props.animal.species}</Card.Description>
      <Card.Description>class:{this.props.animal.class}</Card.Description>
      <Card.Description>description:{this.props.animal.description}</Card.Description>


      </Card.Content>
      </Card>
      </Card.Group>
  )
  };
};

export default AnimalCard;

无论我尝试使用<Grid>，<Gird.Row>和<Grid.Column>的哪种组合，都始终在卡片的垂直显示上。