display items in grid view

Question

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>

Answer 1

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 class="grid"> <div class="card card--grid"></div> <div class="card card--grid"></div> <div class="card card--grid"></div> <div class="card card--grid"></div> <div class="card card--grid"></div> <div class="card card--grid"></div> <div class="card card--grid"></div> <div class="card card--grid"></div> <div class="card card--grid"></div> <div class="card card--grid"></div> <div class="card card--grid"></div> <div class="card card--grid"></div> </div> <div class="flex"> <div class="card card--flex"></div> <div class="card card--flex"></div> <div class="card card--flex"></div> <div class="card card--flex"></div> <div class="card card--flex"></div> <div class="card card--flex"></div> <div class="card card--flex"></div> <div class="card card--flex"></div> <div class="card card--flex"></div> <div class="card card--flex"></div> <div class="card card--flex"></div> <div class="card card--flex"></div> </div>

Answer 2

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