Вопрос о макете сетки в моем приложении реакции

Question

Я пытался отобразить мои изображения в виде сетки.Но после применения функции grid css это было настолько странно, что сетки были организованы горизонтально, как показано на рисунках.Но я хочу, чтобы он был хорошо организован, как два или три изображения в каждой строке.

Моя иерархия компонентов - 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

Если вы хотите, чтобы в каждой строке было 3 из этих товарных позиций, используйте:

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

В результате сетка будет разделена на 3 равных столбца для товарных позиций.Вы можете настроить количество разделений в каждом столбце, добавив или удалив больше дробей (1fr).

Помните, что непосредственные дочерние элементы div с классом «список изображений» - это то, что будет отсортировано в этой сетке, а не дочерние элементы внутри.

Answer 2

Я думаю, что вам не хватает ; в коде.

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