css - 关于我的 react 应用程序中的网格布局的问题

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) 来调整每列的拆分数。

请记住，类为“image-list”的 div 的直接子元素将被分类到此网格中，而不是其中的子元素。