Want to display images from API into 3 columns - css

Question

I am pulling images from an API and wanted to beautifully display them in the browser in 3 columns. But I have 1 column after using react semantic UI of Grid and react-boostrap element of CardColumns
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { Grid, Container } from 'semantic-ui-react';
import Button from 'react-bootstrap/Button';
import { CardColumns } from 'react-bootstrap';
import Card from 'react-bootstrap/Card';
import { fetchMealsStartAsync } from '../actions/getMeals';
const MealList = (props) => {
const { cat } = props;
const meals = useSelector((state) => state.meals.meals);
const dispatch = useDispatch();
useEffect(() => {
dispatch(fetchMealsStartAsync(cat));
}, [cat]);
return (
<Container textalign="center" style={{ marginTop: 40 }}>
<Grid>
<Grid.Row>
{
meals && meals.map((meal) => (
<CardColumns
key={meal.strMeal}
style={{ marginTop: 20 }}
as={Link}
to={{
pathname: `/ingredients/${meal.idMeal}`,
id: meal.idMeal,
}}
>
<Card className="m-2 pb-1" style={{ width: '18rem' }}>
<Card.Img variant="top" src={meal.strMealThumb} />
<Card.Body>
<Card.Title>
{meal.strMeal}
</Card.Title>
<Button variant="primary">
Get Recipe
</Button>
</Card.Body>
</Card>
</CardColumns>
))
}
</Grid.Row>
</Grid>
</Container>
);
};
MealList.propTypes = {
cat: PropTypes.string,
};
MealList.defaultProps = {
cat: '',
};
export default MealList;

Answer 1

Try doing this put your three(or maybe more) fetched items in a parent div(e.g container) and using css selector give that parent div display: flex; flex-direction: row;

Answer 2

I changed <Grid.Row> to <Grid.Column> and added bootstrap to it as follows: <Grid.Column className="d-flex flex-wrap">

Answer 3

you can simply make 3 column in browser display by putting
i.e.
<Grid columns={3}>
<Grid.Column>
<Segment>Content</Segment>
</Grid.Column>
<Grid.Column>
<Segment>Content</Segment>
</Grid.Column>
<Grid.Column>
<Segment>Content</Segment>
</Grid.Column>
<Grid.Column>
<Segment>Content</Segment>
</Grid.Column>
<Grid.Column>
<Segment>Content</Segment>
</Grid.Column>
<Grid.Column>
<Segment>Content</Segment>
</Grid.Column>
</Grid>
or replace whole code with this
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { Grid, Container } from 'semantic-ui-react';
import Button from 'react-bootstrap/Button';
import { CardColumns } from 'react-bootstrap';
import Card from 'react-bootstrap/Card';
import { fetchMealsStartAsync } from '../actions/getMeals';
const MealList = (props) => {
const { cat } = props;
const meals = useSelector((state) => state.meals.meals);
const dispatch = useDispatch();
useEffect(() => {
dispatch(fetchMealsStartAsync(cat));
}, [cat]);
return (
<Container textalign="center" style={{ marginTop: 40 }}>
<Grid>
<Grid.Row columns={3}>
{
meals && meals.map((meal) => (
<Grid.Column>
<CardColumns
key={meal.strMeal}
style={{ marginTop: 20 }}
as={Link}
to={{
pathname: `/ingredients/${meal.idMeal}`,
id: meal.idMeal,
}}
>
<Card className="m-2 pb-1" style={{ width: '18rem' }}>
<Card.Img variant="top" src={meal.strMealThumb} />
<Card.Body>
<Card.Title>
{meal.strMeal}
</Card.Title>
<Button variant="primary">
Get Recipe
</Button>
</Card.Body>
</Card>
</CardColumns>
</Grid.Column>
))
}
</Grid.Row>
</Grid>
</Container>
);
};
MealList.propTypes = {
cat: PropTypes.string,
};
MealList.defaultProps = {
cat: '',
};
export default MealList;