I am making a shopping cart using react hooks and for css I want the card to have 3 columns all of the same size. So, how can I achieve that but don't have an idea how to achieve that. My code for ProductList.jsx, ProductList.css, ProductCard.jsx and Productard.css are below: ProductList.jsx

import React, { useState, useEffect } from "react";
import ProductCard from "../Components/ProductCard/ProductCard";
import './ProductList.css'

const ProductList = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [products, setProducts] = useState([]);

  useEffect(() => {
    setIsLoading(true);

    async function getProducts() {
      const response = await fetch("https://fakestoreapi.com/products");
      const products = await response.json();

      if (products && products.length > 0) {
        setProducts(products);
        setIsLoading(false);
      }
    }
    getProducts();
  }, []);
  return (
    <div className = "Products-wrapper">
      {isLoading ? (
        <div className = "Loading">Fetching data! Please wait</div>
      ) : (
        products.map((product, index) => (
          <ProductCard product={product} key={`${index}${product.id}`} />
        ))
      )}
    </div>
  );
};

export default ProductList;

ProductList.css

.Products-wrapper{
    display: flex;
    flex-wrap: wrap;
    max-width: 1024px;
    width: 80%;
    margin: 70px auto 0;
    gap: 12px;
}

.Loading{
    display:block;
    margin:auto;
    font-size: 24px;
    font-weight: bold;
}

ProductCard.jsx

import React from 'react'
import './ProductCard.css'

const ProductCard = (props) => {

  const { product } = props;
  console.log(product);
  const { category, id, price, title, rating, image } = product;
  return (
    <div className = "ProductCard-wrapper">
      <img className = "ProductCard-image" src={image} alt="Product" />
      <p className = "ProductCard-id">{id }</p>
      <p className = "ProductCard-category">{category }</p>
      <p className = "ProductCard-title">{title }</p>
      <p className = "ProductCard-price"> Rs.{price }</p>
      <p className = "ProductCard-rating">{ rating.rate}</p>
      <button className = "ProductCard-button">Add to cart</button>
    </div>
  )
}

export default ProductCard

ProductCard.css

.ProductCard-wrapper {
  border: 1px solid black;
  border-radius: 10px;
  margin: 10px;
}

.ProductCard-image {
  max-width: 700px;
  width: auto;
  max-height: 700px;
  height: auto;
  /* object-position: top center; */
}

.ProductCard-category {
  font-weight: bolder;
  color: green;
}

.ProductCard-title {
  font-size: 16px;
  font-weight: bold;
  color: #000800;
}

.ProductCard-price {
  font-size: 20px;
  color: orange;
}

.ProductCard-rating {
  font-size: 16px;
}

.ProductCard-button {
  background-color: #ff8c00;
  border: 3px solid #ff8c00;
  width: 100px;
  padding: 5px;
  border-radius: 50px;
  font-size: 14px;
}

I just want the card to be appear as the picture below: It would be good if any one would explain me how to do it.

CodePudding user response：

Convert the Products-wrapper container to use a grid layout with 3 equal columns.

.Products-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

In the ProductCard component place the image inside a div element container.

<div className="ProductCard-image">
  <img src={image} alt="Product" />
</div>

Provide the width/height constraints to the div, and scale the image accordingly.

.ProductCard-wrapper {
  border: 1px solid black;
  border-radius: 10px;
  padding: 0.5rem;
  width: auto;
  min-width: 200px;
  text-align: left;
}

.ProductCard-image {
  display: flex;
  width: auto;
  height: 200px;
  overflow: hidden;
  justify-content: center;
  align-items: center;
}

.ProductCard-image > img {
  width: 100%;
  height: auto;
}

Note: you may need to tweak CSS a bit to get the exact dimensions necessary.

CodePudding user response：

If you want to make it 3 columns, you just need to replace the styles of 2 elements.

See Code Snippet!

.Products-wrapper {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}

.ProductCard-wrapper {
  flex-grow: 1;
  border: solid 1px #ccc;
  padding: 15px;
}

<div class='Products-wrapper'>

  <div >
    <img className="ProductCard-image" src={image} alt="Product" />
    <p className="ProductCard-id">{id }</p>
    <p className="ProductCard-category">{category }</p>
    <p className="ProductCard-title">{title }</p>
    <p className="ProductCard-price"> Rs.{price }</p>
    <p className="ProductCard-rating">{ rating.rate}</p>
    <button className="ProductCard-button">Add to cart</button>
  </div>

  <div >
    <img className="ProductCard-image" src={image} alt="Product" />
    <p className="ProductCard-id">{id }</p>
    <p className="ProductCard-category">{category }</p>
    <p className="ProductCard-title">{title }</p>
    <p className="ProductCard-price"> Rs.{price }</p>
    <p className="ProductCard-rating">{ rating.rate}</p>
    <button className="ProductCard-button">Add to cart</button>
  </div>

  <div >
    <img className="ProductCard-image" src={image} alt="Product" />
    <p className="ProductCard-id">{id }</p>
    <p className="ProductCard-category">{category }</p>
    <p className="ProductCard-title">{title }</p>
    <p className="ProductCard-price"> Rs.{price }</p>
    <p className="ProductCard-rating">{ rating.rate}</p>
    <button className="ProductCard-button">Add to cart</button>
  </div>
</div>