Question about the grid layout in my react app

Question

I was trying to display my images at a grid layout. But after applying the grid css feature, it was so weird that the grids were horizontally organized as the pictures showed. But I want it be well-organized, like two or three images each line.

My component hierarchy is ProductList -> Product -> Thumb -> images

import React, { Component } from "react";
import Filter from "./Filter/index";
import ShelfHeader from "./ShelfHeader/index";
import ProductList from "./ProductList/index";
import Sort from "./Sort/index";
import "./style.css"

class Shelf extends Component {
    render(){
        return (
            <div>
                < Filter />
                <div className="shelf">
                    < Sort />
                    < ShelfHeader />
                    < ProductList />
                </div>
            </div>
        );
    }
}

export default Shelf;

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

import React from 'react';
import Product from "./Product/index";
import Data from "../../../data/data.json";
import "./style.css"

const ProductList = () => {
    const renderedList = Data.goods.map(product => {
        return <Product product={product} key={product.name} />
    }
);   

    return <div className="image-list">{renderedList}</div>;
}

export default ProductList;

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

.image-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px,1fr))
}

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

import React, { Component } from "react";
import Thumb from "../../../Thumb/index";

const Product = props => {
        return (
            <div className="shelf-item">
                <div className="shelf-stopper">Free shipping</div>
                <Thumb 
                    classes="shelf-item__thumb"
                    src={props.product}
                />
                <p className="shelf-item__title">product</p>
                <div className="shelf-item__price">
                    productInstallment  
                </div>
                <div className="shelf-item__buy-btn">Add to cart</div>
            </div>
        );
    }

export default Product;

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

import React from 'react';

const Thumb = (props) => {
    console.log(props.src.pictures)
    return (
        <div className={props.classes}>
            <img style={{width: "250px"}}
            src={`../../static/products/${props.src.pictures}`} 
            alt={props.src.name} />
        </div>
    )
}

export default Thumb;

Answer 1

If you want there to be 3 of those product items in every row use:

.image-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

This makes the grid split 3 equal columns for the product items. You can adjust how many splits each column has by adding or removing more fractions (1fr).

Remember the immediate children of the div with class "image-list" is what will be sorted into this grid and not the children elements within.

Answer 2

I think you are missing ; in the code.

.image-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
}