reusable grid

Author: zJiaJun

starter/07-Omnifood-Desktop/css/style.css

@@ -62,6 +62,29 @@ body {
 /* Genral Reusable Components */
 /**************************/
 
+.container {
+  /* 1140px */
+  max-width: 120rem;
+  padding: 0 3.2rem;
+  margin: 0 auto;
+}
+
+.grid {
+  display: grid;
+  gap: 9.6rem;
+}
+
+.grid--2-cols {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.grid--3-cols {
+  grid-template-columns: repeat(3, 1fr);
+}
+.grid--4-cols {
+  grid-template-columns: repeat(4, 1fr);
+}
+
 .heading-primary {
   font-size: 5.2rem;
   font-weight: 700;
@@ -225,3 +248,12 @@ body {
   color: #cf711f;
   font-weight: 700;
 }
+
+/**************************/
+/* How it works Section */
+/**************************/
+
+.section-how {
+  padding: 9.6rem 0;
+  background-color: orangered;
+}

starter/07-Omnifood-Desktop/index.html

@@ -66,6 +66,15 @@ <h1 class="heading-primary">
           </div>
         </div>
       </section>
+
+      <section class="section-how">
+        <div class="container grid grid--2-cols">
+          <div>Test 1</div>
+          <div>Test 2</div>
+          <div>Test 3</div>
+          <div>Test 4</div>
+        </div>
+      </section>
     </main>
   </body>
 </html>