grid layout

index.html

@@ -14,10 +14,8 @@
     <a href="Contact.html">Contact</a>
   </nav>
 
-  <main>
-  <div class='columns'>
-    <div class='rows'>
-      <header>
+  <main id="home_page_content">
+      <header id="head">
         <h1>Paws And Petals</h1>
         Paws And Petals is a small local dog grooming business
         started up by Arianwen Evans to allow her to work in
@@ -26,7 +24,7 @@
         Starting out with the pets of friends and family, she hopes to 
         slowly develop a small userbase of friends and local-clientelle.
       </header>
-      <section>
+      <section id="qual">
         <h2>Qualifications</h2>
         Arianwen Evans holds:
         <ul>
@@ -34,22 +32,17 @@
         <li>Level 3 Diploma in dog grooming</li>
         </ul>
       </section>
-    </div>
-    <div class='rows'>
-      <section id='contact'>
+      <section id='times'>
         <h2>Opening Times</h2>
         Monday-Friday: 10am - 5pm
         <br>
         Saturday-Sunday: Closed
       </section>
-      <section>
+      <section id="book">
         <h2>How To Book</h2>
         To book, see our <a href="Contact.html">contact</a>
         page and email us.
       </section>
-    </div>
-  
-  </div>
   </main>
 
 </body>

style.css

@@ -81,26 +81,30 @@ a:hover{
   color: black;
 }
 
-.columns{
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-  justify-content: space-between;
-  align-content: stetch;
-  align-items: stretch;
+#home_page_content{
+  display: grid;
+  gap: 7px;
+  grid-template-areas:
+  "head open"
+  "qual book";
+  grid-template-columns: 3fr 1fr;
 }
 
-.rows{
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  align-content: stretch;
-  align-items: stretch;
-  
-}
-
-#contact{
+#times{
   text-align: center;
+  grid-area: open
+}
+
+#head{
+  grid-area: head;
+}
+
+#qual{
+  grid-area: qual
+}
+
+#book{
+  grid-area: book;
 }
 
 .socials{