When attempting to arrange my images in a grid layout, I encountered a strange issue after applying CSS grid. The grids ended up being organized horizontally instead of how I wanted them to be - two or three images per line.
The component hierarchy is as follows: 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;