display items in grid view-CodePudding

so far I was trying to display some items (cards) in grid view which mean when they reach the end of the line they go back to fill the second one and so on. However, I got all my items stack in just one line no matter how many items I am adding they're always getting smaller so that they can fit that one line. By the way I am building a react application if that would help. This is my code so far:

import React from 'react';
import NavBar from '../../components/Navbar';
import CardLayout from '../../components/Card';
import './HomeScreen.css'

const HomeScreen=()=>{
    return(
        <>
            <NavBar/>
            <div className='general-container'>
                <CardLayout/>
                <CardLayout/>
                <CardLayout/>
                <CardLayout/>
                <CardLayout/>
                <CardLayout/>
                <CardLayout/>
                <CardLayout/>
            </div>
        </>
    )
}

export default HomeScreen;

*,*::before,*::after{
    box-sizing: border-box;
    font-family:Arial, Helvetica, sans-serif;
}


.general-container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    column-gap: 15px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

CodePudding user response：

it will be helpful if you share your navbar and cardlayout component code , but for now the following link may guide you Responsive Card Grid in React

CodePudding user response：

Here is an example using both css grid and flex. Maybe it will help you.

On the flex example you could use justify-content: flex-start if you want the items to align to the left instead of being centered.

.grid {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat( auto-fit, minmax(100px, 1fr));
  margin-bottom: 2rem;
}

.flex {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}

.card {
  height: 100px;
  width: 100px;
}

.card--grid {
  background-color: lightgreen;
}

.card--flex {
  background-color: lightblue;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>