nested-grid-exercise

webblocksapp · webblocksapp · commit e1b8a326bd47 · 2021-10-12T18:04:15.000-05:00
diff --git a/index.css b/index.css
@@ -0,0 +1,106 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+  background-color: gray;
+}
+
+#main-container {
+  background-color: bisque;
+  height: 100%;
+  display: grid;
+  grid-template-columns: 3fr 1fr;
+}
+
+.col-1 {
+  display: grid;
+  overflow: auto;
+  grid-template-rows: 1fr 1fr;
+}
+
+.row-1 {
+  background-color: cadetblue;
+  overflow: auto;
+  display: grid;
+  grid-template-rows: 1fr 2fr;
+}
+
+.row-1-1 {
+  background-color: crimson;
+  overflow: auto;
+}
+
+.row-1-2 {
+  background-color: darkkhaki;
+  overflow: auto;
+}
+
+.col-2 {
+  display: grid;
+  grid-template-rows: 90px 1fr 90px;
+  overflow: auto;
+}
+
+.row-2 {
+  background-color: chocolate;
+  overflow: auto;
+  display: grid;
+  grid-template-rows: 3fr 1fr;
+}
+
+.row-2-1 {
+  background-color: darkmagenta;
+  overflow: auto;
+}
+
+.row-2-2 {
+  background-color: darkslateblue;
+  overflow: auto;
+}
+
+.row-3 {
+  background-color: darkturquoise;
+}
+
+.row-4 {
+  background-color: firebrick;
+  display: grid;
+  grid-template-rows: 1fr;
+  overflow: auto;
+}
+
+.row-4-1 {
+  padding: 20px;
+  display: grid;
+  grid-template-rows: 1fr;
+  overflow: auto;
+}
+
+.row-5 {
+  background-color: fuchsia;
+}
+
+.text-editor {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  overflow: auto;
+}
+
+.toolbar {
+  background-color: black;
+  color: white;
+}
+
+.content {
+  background-color: wheat;
+  overflow: auto;
+}
+
+.test-height {
+  height: 1000px;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,46 @@
+<!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="stylesheet" href="index.css" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div id="main-container">
+      <div class="col-1">
+        <div class="row-1">
+          <div class="row-1-1">
+            <div class="test-height">row-1-1</div>
+          </div>
+          <div class="row-1-2">
+            <div class="test-height">row-1-2</div>
+          </div>
+        </div>
+        <div class="row-2">
+          <div class="row-2-1">
+            <div class="test-height">row-2-1</div>
+          </div>
+          <div class="row-2-2">
+            <div class="test-height">row-2-2</div>
+          </div>
+        </div>
+      </div>
+      <div class="col-2">
+        <div class="row-3"></div>
+        <div class="row-4">
+          <div class="row-4-1">
+            <div class="text-editor">
+              <div class="toolbar">Toolbar</div>
+              <div class="content">
+                <div class="test-height">Text content</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="row-5"></div>
+      </div>
+    </div>
+  </body>
+</html>
