complete challenge jonasschmedtmann#3 - css grid

Author: lnnchau

Diff for: starter/04-CSS-Layouts/challenge.html

@@ -12,42 +12,43 @@
       <p class="sale">Sale</p>
       <h3 class="product-name">Converse Chuck Taylor All Star Low Top</h3>
 
-      <div class="product-info-content">
-        <img src="img/challenges.jpg" alt="Converse" width="250" height="250" />
+      <!-- useful only for flexbox -->
+      <!-- <div class="product-info-content"> -->
+      <img src="img/challenges.jpg" alt="Converse" width="250" height="250" />
 
-        <div class="product-info">
-          <div class="price-shipping">
-            <p class="product-price">$65</p>
+      <div class="product-info">
+        <div class="price-shipping">
+          <p class="product-price">$65</p>
 
-            <p class="shipping">Free shipping</p>
-          </div>
+          <p class="shipping">Free shipping</p>
+        </div>
 
-          <p class="product-description">
-            Ready to dress up or down, these classic canvas Chucks are an
-            everyday wardrobe staple.
-          </p>
+        <p class="product-description">
+          Ready to dress up or down, these classic canvas Chucks are an everyday
+          wardrobe staple.
+        </p>
 
-          <a class="more-info" href="#"> More information &RightArrow;</a>
+        <a class="more-info" href="#"> More information &RightArrow;</a>
 
-          <div class="color-board">
-            <div class="color-board-item color-black"></div>
-            <div class="color-board-item color-blue"></div>
-            <div class="color-board-item color-red"></div>
-            <div class="color-board-item color-yellow"></div>
-            <div class="color-board-item color-green"></div>
-            <div class="color-board-item color-brown"></div>
-          </div>
+        <div class="color-board">
+          <div class="color-board-item color-black"></div>
+          <div class="color-board-item color-blue"></div>
+          <div class="color-board-item color-red"></div>
+          <div class="color-board-item color-yellow"></div>
+          <div class="color-board-item color-green"></div>
+          <div class="color-board-item color-brown"></div>
         </div>
+      </div>
 
-        <div class="product-details">
-          <h4 class="product-details-title">Product details</h4>
-          <ul class="product-details-list">
-            <li>Lightweight, durable canvas sneaker</li>
-            <li>Lightly padded footbed for added comfort</li>
-            <li>Iconic Chuck Taylor ankle patch.</li>
-          </ul>
-        </div>
+      <div class="product-details">
+        <h4 class="product-details-title">Product details</h4>
+        <ul class="product-details-list">
+          <li>Lightweight, durable canvas sneaker</li>
+          <li>Lightly padded footbed for added comfort</li>
+          <li>Iconic Chuck Taylor ankle patch.</li>
+        </ul>
       </div>
+      <!-- </div> -->
       <button class="add-to-card-btn">Add to cart</button>
     </article>
   </body>

Diff for: starter/04-CSS-Layouts/challenge.style.css

@@ -14,15 +14,10 @@ body {
   width: 825px;
   margin: 50px auto;
   position: relative;
-}
-
-.product-info-content {
-  display: flex;
-  gap: 40px;
-}
 
-.product-info {
-  flex: 1;
+  display: grid;
+  grid-template-columns: auto 1fr 1fr;
+  column-gap: 40px;
 }
 
 .sale {
@@ -56,6 +51,8 @@ body {
   text-align: center;
   background-color: #f7f7f7;
   padding: 10px 40px;
+
+  grid-column: 1 / -1;
 }
 
 /* PRODUCT INFORMATION */
@@ -90,10 +87,6 @@ body {
 }
 
 /* PRODUCT DETAILS */
-.product-details {
-  flex: 1;
-}
-
 .product-details-title {
   text-transform: uppercase;
   margin-bottom: 15px;
@@ -111,7 +104,7 @@ body {
 /* ADD TO CARD BUTTON */
 .add-to-card-btn {
   font-size: 20px;
-  width: 100%;
+  /* width: 100%; */
   padding: 10px 40px;
 
   color: white;
@@ -121,6 +114,8 @@ body {
 
   border: none;
   border-top: 4px solid black;
+
+  grid-column: 1 / -1;
 }
 
 .add-to-card-btn:hover {