section-7: Generic grid

Author: owen-webb

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

@@ -86,6 +86,29 @@ body {
   box-shadow: inset 0 0 0 .3rem #fff;
 }
 
+.container {
+  margin: 0 auto;
+  max-width: 120rem;
+  padding: 0 3.2rem;
+}
+
+.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 {
   color: #333;
   font-size: 5.2rem;
@@ -185,8 +208,6 @@ body {
   font-weight: 700;
 }
 
-
-
 .hero {
   align-items: center;
   display: grid;
@@ -211,3 +232,10 @@ body {
   background-color: #fdf2e9;
   padding: 4.8rem 0 9.6rem 0;
 }
+
+
+/*** HOW ***/
+
+.section-how {
+  padding: 9.6rem 0;
+}

starter/07-Omnifood-Desktop/index.html

@@ -63,6 +63,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>