New to React/CSS here.

I have the following page:

I'm trying to reach to a point where I have equal amount of elements in each row - in this case, 4 pokemon cards in each row.

I can't quite figure out how to do it.

the code related to the 'cards' which I want to be positions 2x4:

Pokecards.css

.Pokecard {
border-radius: 10px;
justify-content: center;
padding: 10px;
width: 300px;
box-shadow: 7px 10px 12px -5px rgba(0,0,0,0.56);
margin: 1rem;
text-align: center;
background: white;
}

Pokecards.js

import React, {Component} from 'react';
import './Pokecard.css'
const POKE_API = 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/';

class Pokecard extends Component {
    render(){
        let imgSrc = `${POKE_API}${this.props.id}.png`;
        let pokenameStyle="display: inline;";
        return(
            <div className='Pokecard'>
                <div className='Pokecard-headername'>
                    <h3 >{this.props.name}</h3>
                
                
                <img src={imgSrc} alt={this.props.name}/>
                
                <p>Type: {this.props.type}<br></br>Exp: {this.props.exp}</p>
                </div>
                
                
            
            </div>
        )
    }
}

export default Pokecard;

and just in case I might screw things in the upper-class, Pokedex:

Pokedex.css

.Pokedex-cards{
    display: flex;
    /* display: inline; */
    flex-wrap: wrap;
    justify-content:space-evenly;
}

.Pokedex-Title{
    text-align: center;
}

Pokedex.js

import React, {Component} from "react";
import Pokecard from "./Pokecard";
import './Pokedex.css'
const POKE_API = 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/';

class Pokedex extends Component{
    static defaultProps = {
        pokemon: [ //ARRAY
            {id: 4, name: 'Charmander', type: 'fire', base_experience: 62},
            {id: 7, name: 'Squirtle', type: 'water', base_experience: 63},
            {id: 11, name: 'Metapod', type: 'bug', base_experience: 72},
            {id: 12, name: 'Butterfree', type: 'flying', base_experience: 178},
            {id: 25, name: 'Pikachu', type: 'electric', base_experience: 112},
            {id: 39, name: 'Jigglypuff', type: 'normal', base_experience: 95},
            {id: 94, name: 'Gengar', type: 'poison', base_experience: 225},
            {id: 133, name: 'Eevee', type: 'normal', base_experience: 65}
          ]
    };
    
    render(){
        return(
            <div className="Pokedex">
                
                <h1 className="Pokedex-Title">Pokedex</h1>
                <div className="Pokedex-cards">
                {this.props.pokemon.map((p)=>(
                    <Pokecard id={p.id} name={p.name} type={p.type} exp={p.base_experience}/>
                ))}
                </div>
            </div>
        );
    }
}

export default Pokedex;

if more information is needed, I will provide it happily.

cheers!

CodePudding user response：

I notice you are using flexbox here.

It would be better if you changed that to css grid.

You can get 4 columns and 2 rows easily.

Pokedex.css

.Pokedex-cards{
    display: grid;
    grid-template-columns: repeat(4, auto);
}

If you aren't familiar with grid, check this https://www.w3schools.com/css/css_grid.asp