updated css using classes using grid

Author: bodoszidi

Wireframe/index.html

@@ -18,6 +18,7 @@ <h1>Workflow</h1>
             </p>
         </header>
         <main>
+            <div class="firstrow">
             <article>
                 <img src="Readme.png" alt="Readme file example" />
                 <h2>README files</h2>
@@ -33,36 +34,38 @@ <h2>README files</h2>
                     >Read more</a
                 >
             </article>
-            <article>
-                <img src="Wireframe.png" alt="Wireframe example" />
-                <h2>Wireframe</h2>
-                <p>
-                    A wireframe isa simple visual layout used to plan the
-                    structure, content, and use experience of a website or
-                    application before development begins.
-                </p>
-                <a
-                    href="https://www.figma.com/resource-library/what-is-wireframing"
-                    >Read more</a
-                >
-            </article>
-            <article>
-                <img src="GitBranch.png" alt="Git branching example" />
-                <h2>Git Branching</h2>
-                <p>
-                    Git branching allows developers to work on new features or
-                    fixes separately without affecting the main project code
-                    until the changes are ready to merge
-                </p>
-                <a href="https://www.atlassian.com/git/tutorials/using-branches"
-                    >Read more</a
-                >
-            </article>
+            </div>
+            <div class="secondrow">
+                <article>
+                    <img src="Wireframe.png" alt="Wireframe example" />
+                    <h2>Wireframe</h2>
+                    <p>
+                        A wireframe isa simple visual layout used to plan the
+                        structure, content, and use experience of a website or
+                        application before development begins.
+                    </p>
+                    <a
+                        href="https://www.figma.com/resource-library/what-is-wireframing"
+                        >Read more</a
+                    >
+                </article>
+                <article>
+                    <img src="GitBranch.png" alt="Git branching example" />
+                    <h2>Git Branching</h2>
+                    <p>
+                        Git branching allows developers to work on new features
+                        or fixes separately without affecting the main project
+                        code until the changes are ready to merge
+                    </p>
+                    <a
+                        href="https://www.atlassian.com/git/tutorials/using-branches"
+                        >Read more</a
+                    >
+                </article>
+            </div>
         </main>
         <footer>
-            <p>
-                This website was coded by Szidonia Bodo
-            </p>
+            <p>This website was coded by Szidonia Bodo</p>
         </footer>
     </body>
 </html>

Wireframe/style.css

@@ -6,21 +6,21 @@
   --font: 100%/1.5 system-ui;
   --space: clamp(6px, 6px + 2vw, 15px);
   --line: 1px solid rgb(201, 198, 198);
-  --container: 1280px;
 }
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
 body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+  display: block;
+  margin: 10px;
 }
 h1{
   text-align: center;
   padding: var(--space);
 }
 h2, p{
-  padding: var(--space);
   margin: var(--space);
 }
 a {
@@ -40,7 +40,7 @@ Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
 */
 main {
-  max-width: var(--container);
+  max-width: 900px;
   margin: 0 auto calc(var(--space) * 4) auto;
 }
 footer {
@@ -49,37 +49,14 @@ footer {
   bottom: 0;
   text-align: center;
 }
-/* ====== Articles Grid Layout ====
-Setting the rules for how articles are placed in the main element.
-Inspect this in Devtools and click the "grid" button in the Elements view
-Play with the options that come up.
-https://developer.chrome.com/docs/devtools/css/grid
-https://gridbyexample.com/learn/
-*/
-main {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space);
-  > *:first-child {
-    grid-column: span 2;
-  }
-}
-/* ====== Article Layout ====== 
-Setting the rules for how elements are placed in the article. 
-Now laying out just the INSIDE of the repeated card/article design.
-Keeping things orderly and separate is the key to good, simple CSS.
-*/
+
 article {
   border: var(--line);
   border-radius: 5px;
   padding-bottom: var(--space);
   text-align: left;
-  display: grid;
-  grid-template-columns: var(--space) 1fr var(--space);
-  > * {
-    grid-column: 2/3;
-  }
-  > img {
-    grid-column: span 3;
-  }
 }
+.firstrow {
+  display: grid;
+  grid-column: 1fr;
+}