Question

我试图以网格布局显示图像。但是，在应用了网格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的直接子项归入此网格，而不是其中的子项元素。

Answer 2

我认为您在代码中缺少;。

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

有关我的React App中的网格布局的问题

2 个答案: