我试图以网格布局显示我的图像。但是在应用了 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;
最佳答案
如果您希望每行中有 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/