Add css grid irregular layout example

zxuqian · Feb 27, 2023 · c1b3a27 · c1b3a27
1 parent cc00e66
commit c1b3a27
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 0 deletions.
diff --git a/50-css-grid-irregular-layout/images/travel1.png b/50-css-grid-irregular-layout/images/travel1.png
diff --git a/50-css-grid-irregular-layout/images/travel2.png b/50-css-grid-irregular-layout/images/travel2.png
diff --git a/50-css-grid-irregular-layout/images/travel3.png b/50-css-grid-irregular-layout/images/travel3.png
diff --git a/50-css-grid-irregular-layout/index.html b/50-css-grid-irregular-layout/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;900&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <title>CSS Irregular Layout</title>
+  </head>
+  <body>
+    <main>
+      <header>
+        <h1>Give yourself a chance to see the world</h1>
+        <p class="description1">
+          Lorem ipsum dolor sit amet consectetur. Eget amet lacus egestas amet
+          porta sagittis pulvinar magna pretium. Lorem mauris vitae pellentesque
+          platea velit volutpat magna sem. Elit eu sit facilisi nullam neque
+          tincidunt sed volutpat metus. Amet sed at sed ante senectus sit
+          bibendum tincidunt eu.
+        </p>
+        <img src="./images/travel1.png" alt="travel" class="image1" />
+        <img src="./images/travel2.png" alt="travel" class="image2" />
+        <img src="./images/travel3.png" alt="travel" class="image3" />
+        <p class="description2">
+          Lorem ipsum dolor sit amet consectetur. Eget amet lacus egestas amet
+          porta sagittis pulvinar magna pretium. Lorem mauris vitae pellentesque
+          platea velit volutpat magna sem. Elit eu sit facilisi nullam neque
+          tincidunt sed volutpat metus. Amet sed at sed ante senectus sit
+          bibendum tincidunt eu.
+        </p>
+      </header>
+    </main>
+  </body>
+</html>
diff --git a/50-css-grid-irregular-layout/style.css b/50-css-grid-irregular-layout/style.css
@@ -0,0 +1,57 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: "Raleway", sans-serif;
+}
+
+main {
+  width: 80vw;
+  margin: 0 auto;
+}
+
+p {
+  font-size: 16px;
+  padding: 24px 0;
+  line-height: 1.5em;
+}
+
+header {
+  display: grid;
+  grid-template-columns: 6fr 1fr 1fr 3fr 5fr 1fr;
+  grid-template-rows: 40px repeat(6, auto);
+}
+
+h1 {
+  grid-column: 1 / span 3;
+  grid-row: 2 / 3;
+  font-size: 65px;
+  font-weight: 900;
+  z-index: 10;
+}
+
+.description1 {
+  grid-column: 1 / 2;
+  grid-row: 3 / 4;
+}
+
+.image1 {
+  grid-column: 1 / 2;
+  grid-row: 4 / span 2;
+}
+
+.image2 {
+  grid-column: 3 / span 3;
+  grid-row: 1 / span 6;
+}
+
+.image3 {
+  grid-column: 5 / span 2;
+  grid-row: 5 / span 3;
+}
+
+.description2 {
+  grid-column: 1 / span 4;
+  grid-row: 7 / 8;
+  padding-right: 48px;
+}