使用Semantic-ui-react包的Reactjs地图网格

Question

I wanna make grid having 3 columns by semantic-ui-react.

Actually, I use .map function to make a list as like below.

const JourneyList = (props) => (
<Grid colums={3} divided>
    {props.journies.map((journey) => (
        <JourneyListItem {...journey} key={journey.JourId} />
    ))}
</Grid>

)

And the list is called from

class JourneyDashboard extends React.Component {
render() {        
    return (
        <div>
            <div className="container-sort">
                <Link to='/create'><button>+New Journey</button></Link>
            </div>
            <div className="container-list">
                <JourneyList />
            </div>
        </div>
    )
}

}

is here.

const JourneyListItem = ({ JourId, Title, StartDate, EndDate, Note }) => (
<Card.Group>
    <Card>
        <Card.Content as={Link} to={`/edit/${JourId}`}>
            <Image src='../../images/nzflag.png' />
            <Card.Header>
                {Title}
            </Card.Header>
            <Card.Meta>
                {moment(StartDate).format('DD. MMM. YYYY')} to {moment(EndDate).format('DD. MMM. YYYY')}
            </Card.Meta>
            <Card.Description>
                {Note}
            </Card.Description>
        </Card.Content>
    </Card>
</Card.Group>

)

How can I draw the grid in 3 columns using .map fucntion? Help me. Thanks.

Answer 1

The Grid system of semantic-ui works with 16 columns base.
So what you can do is wrap <JourneyListItem /> with a <Grid.Column width={5} />
This way you won't get more than 3 columns on each row:

const JourneyList = (props) => (
  <Grid colums={3} divided>
    {props.journies.map((journey) => (
      <Grid.Column width={5}>
        <JourneyListItem {...journey} key={journey.JourId} />
      </Grid.Column>
    ))}
  </Grid>
);

---

Running example with your code:

 const { Grid, Card, Link, Image } = semanticUIReact; // import const journies = [ { JourId: 1, Title: 'Nepal', StartDate: '2018-02-20', EndDate: '2018-02-25' }, { JourId: 1, Title: 'India', StartDate: '2018-05-05', EndDate: '2018-05-10' }, { JourId: 1, Title: 'Thailand', StartDate: '2018-07-15', EndDate: '2018-07-22' }, { JourId: 1, Title: 'South America', StartDate: '2019-02-10', EndDate: '2019-02-23' } ]; const JourneyList = (props) => ( <Grid colums={3} divided> {props.journies.map((journey) => ( <Grid.Column width={5}> <JourneyListItem {...journey} key={journey.JourId} /> </Grid.Column> ))} </Grid> ); const JourneyListItem = ({ JourId, Title, StartDate, EndDate, Note }) => ( <Card.Group> <Card> <Card.Content as={Link} to={`/edit/${JourId}`}> <Image src='http://nadirkeval.com/wp-content/uploads/2014/11/longroad.jpg' /> <Card.Header> {Title} </Card.Header> <Card.Meta> {moment(StartDate).format('DD. MMM. YYYY')} to {moment(EndDate).format('DD.MMM.YYYY')} </Card.Meta> <Card.Description> {Note} </Card.Description> </Card.Content> </Card> </Card.Group> ) class JourneyDashboard extends React.Component { render() { return ( <div> <div className="container-list"> <JourneyList journies={journies} /> </div> </div> ) } } ReactDOM.render(<JourneyDashboard />, document.getElementById('root')); 

 <script src="https://cdn.jsdelivr.net/npm/moment@2.20.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui-react/0.78.2/semantic-ui-react.min.js"></script> <div id="root"></div>