diff --git a/README.md b/README.md
index 9344f91..7b5bbf1 100644
--- a/README.md
+++ b/README.md
@@ -192,9 +192,43 @@ If we want the tracks to have a defined height or width we can use the **propert
## Grid Examples from Practice
--- TODO: add common use-cases and examples
+All those examples can are implemented in the grid-example-website folder.
+#### Creating an Overall Layout (media-queries)
+The overall composition of our page should look like this on desktop and on mobile:
+
+
+
+To accomplish such a layout, we have to define a column with a **fixed width for the menu** and a column for the content. The menu should switch to the top, when the screen gets smaller. For the footer, we can just use the `min-content` value.
+
+We can get such a layout with defining it with **template-areas and media-queries**.
+
+```css
+.page-container {
+ height: 100vh;
+
+ display: grid;
+ grid-template-columns: 5rem 1fr;
+ grid-template-rows: 1fr min-content;
+ grid-template-areas: "menu content "
+ "footer footer ";
+}
+
+@media only screen and (max-width: 800px) {
+ .page-container {
+ grid-template-columns: 1fr;
+ grid-template-rows: 5rem 1fr min-content;
+ grid-template-areas: "menu"
+ "content"
+ "footer";
+ }
+}
+```
+
+
+
+#### fixed columns that shrink with the viewport
## Links
diff --git a/grid-expample-website/_base.css b/grid-expample-website/_base.css
new file mode 100644
index 0000000..e90c82e
--- /dev/null
+++ b/grid-expample-website/_base.css
@@ -0,0 +1,93 @@
+:root {
+ font-size: 1em;
+ box-sizing: border-box;
+
+ /* COLORS */
+ --color-olive: #A5A58D;
+ --color-sand: #DDBEA9;
+ --color-creme: #F0EFEB;
+ --color-black: #1D120B;
+ --color-grey: #7d7d7d;
+}
+
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: inherit;
+}
+
+
+/* Definition of top-level page grid (overall layout) */
+.page-container {
+ height: 100vh;
+ display: grid;
+ grid-template-columns: 5rem 1fr;
+ grid-template-rows: 1fr min-content;
+ grid-template-areas: "menu content "
+ "footer footer ";
+}
+
+@media only screen and (max-width: 800px) {
+ .page-container {
+ grid-template-columns: 1fr;
+ grid-template-rows: 5rem 1fr min-content;
+ grid-template-areas: "menu"
+ "content"
+ "footer";
+ }
+}
+
+.menu {
+ grid-area: menu;
+ background-color: var(--color-sand);
+}
+.content {
+ grid-area: content;
+ background-color: var(--color-creme);
+}
+.footer {
+ grid-area: footer;
+ background-color: var(--color-olive);
+}
+
+
+
+/*** just custom styling ***/
+* {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+h1 {
+ text-align: center;
+ margin: 1em 0;
+}
+
+.button {
+ display: block;
+
+ width: 160px;
+ height: min-content;
+ padding: 0.7em;
+ margin: 3rem auto;
+
+ border: none;
+ border-radius: 1em;
+ background-color: var(--color-sand);
+ box-shadow: 0px 0px 20px 0px var(--color-grey);
+
+ color: var(--color-creme);
+ text-decoration: none;
+ text-align: center;
+ font-style: normal;
+ font-weight: normal;
+ box-sizing: border-box;
+}
+
+.button:hover {
+ color: var(--color-sand);
+ border-color: var(--color-sand);
+ background-color: var(--color-creme);
+}
+
diff --git a/grid-expample-website/example-website.html b/grid-expample-website/example-website.html
deleted file mode 100644
index eb9310f..0000000
--- a/grid-expample-website/example-website.html
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
-
- CSS Grid Examples
-
-
-
-
-
-
- Go back
-
-
diff --git a/grid-expample-website/index.html b/grid-expample-website/index.html
new file mode 100644
index 0000000..9efa681
--- /dev/null
+++ b/grid-expample-website/index.html
@@ -0,0 +1,231 @@
+
+
+
+
+ CSS Grid Examples
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
Feature
+
+
+
+
Feature
+
+
+
+
Feature
+
+
+
+
Feature
+
+
+
Implicit and Explicit Grid
Item 8
- Show Grid Example Website
+ Show Grid Example Website