关于我的反应应用程序中的网格布局的问题答案

【问题标题】：Question about the grid layout in my react app关于我的反应应用程序中的网格布局的问题
【发布时间】：2019-02-12 02:23:01
【问题描述】：

我试图以网格布局显示我的图像。但是在应用网格 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;

【问题讨论】：

标签： css reactjs css-grid

【解决方案1】：

如果您希望每行中有 3 个这些产品项目，请使用：

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

这使得网格将产品项目分成 3 个相等的列。您可以通过添加或删除更多分数来调整每列的拆分数 (1fr)。

请记住，具有“图像列表”类的 div 的直接子元素将被排序到此网格中，而不是其中的子元素。

【讨论】：

没问题，你也可以调整数字，让特定的div比其他的占据更大的空间。例如。 grid-template-columns: 2fr 1fr 1fr - 网格内的第一个 div 将与其他两个一样宽，另外两个将平均分配其宽度。

【解决方案2】：

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

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

【讨论】：

感谢您的回答，明明加分号是可以的，但我认为问题不在此。