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

标签 css reactjs css-grid

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

enter image description here

最佳答案

如果您希望每行中有 3 个这样的产品元素,请使用:

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

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

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

关于css - 关于我的 react 应用程序中的网格布局的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54641949/

相关文章:

javascript - 如何将父组件的输入集中到子组件上?

jquery - CSS Grid 无限滚动和动态内容

html - 分配 line-height 以跨越 html 中的元素 buggy ?

javascript - 如何在类组件中处理从父级事件处理程序传递到子级事件处理程序的附加参数

javascript - 使用移动 css 布局在页面滚动上添加 css 规则

javascript - "Run the packager with ` --clearCache` 标志在 React Native 中是什么意思?

css - 当每一行都包裹在自己的容器 div 中时,可以使用 CSS 网格吗?

html - 我如何使网格响应?

javascript - 单击时更改按钮颜色

javascript - 在两个整页上打印两个图像