Aligns products to a responsive grid

.gitignore

@@ -24,3 +24,4 @@ yarn-error.log*
 
 
 .env
+yarn.lock

src/component/Product.css

+.img-container{
+    position:relative;
+    overflow:hidden;
+    padding-bottom:100%;
+}
+img {
+    position: absolute;
+    max-width: 100%;
+    max-height: 100%;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+}
\ No newline at end of file

src/component/Product.jsx

+import React from 'react'
+import './Product.css'
+
+export default function Product({product}) {
+
+  return (
+    <div>
+        <div className="img-container">
+            <img src={product.productImageUrl} alt={product.productName}/>
+        </div>
+        <div className="prod-info">
+            <h5>{product.productName}</h5>
+            {product.sku}<br/>
+            ${product.price}<br/>
+            In Stock: {product.stock}
+        </div>		
+    </div>
+  )
+}

src/component/ProductGrid.css

+#title {
+    margin-left: 1em;
+}
+
+#prod-grid {
+    margin-left: 2em;
+}
\ No newline at end of file

src/component/ProductGrid.jsx

 import React from 'react'
-
+import Product from './Product.jsx'
+import { Col, Container, Row } from 'react-bootstrap';
+import './ProductGrid.css'
 export default function ProductGrid({productData}) {
-
-  return (
-    <div>
-      PRODUCT GRID
-      
-      <div id="prod-grid">
-                <table>
-					<tbody>
-                    {productData.map((product) => {
-                        return (
-                            <tr>
-                                <td><img src={product.productImageUrl} alt="product"/></td>
-                                <td>{product.productName}</td>
-                                <td>{product.price}</td>
-                                <td>{product.sku}</td>
-                                <td>{product.description}</td>
-                            </tr>
-                        )
-                    })}
-					</tbody>
-                </table>
-            </div>
-    </div>
-  )
-}
+	
+	return (
+		//uses react bootstrap components
+		<Container id="prod-grid"  >
+		<Row xs={1} sm={2} md={3} lg={4}>
+		{productData.map((product) => {
+			return (
+				<Col key={product.sku}>
+				<Product product={product}/>
+				</Col>
+				)
+			})}
+			</Row>
+			</Container>
+			
+			//uses vanilla bootstrap
+			// <div>
+			//   	<h1 id="title">Inventory</h1>
+			// 	<div className="container" id="prod-grid"  >
+			// 	<div className="row row-cols-4">
+			// 		{productData.map((product) => {
+			// 			return (
+			// 					<div className="col" key={product.sku}>
+			// 						<Product product={product}/>
+			// 					</div>
+			
+			// 			)
+			// 		})}
+			// 		</div>
+			// 	</div>   
+			// </div>
+			)
+		}
+		
\ No newline at end of file

src/index.js

 import React from "react";
 import ReactDOM from "react-dom";
+import 'bootstrap/dist/css/bootstrap.css';
 import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";