Scott Foster playing with css grid

public/App.js

@@ -1,3 +1,15 @@
 function App(){
-  return <div><Main /></div>
-}
+  return (
+    <div className='container'>
+      <Main />
+      <Header />
+      <Footer />
+      <Leftside />
+      <Rightside />
+      <Box />
+      <NewBox />
+      <BoxThree />
+      <Nine />
+    </div>
+  )
+}

public/Box.js

@@ -0,0 +1,8 @@
+function Box() {
+  return (
+    <h1 className='BoxClass'>
+      This is a box
+    </h1>
+  )
+
+}

public/BoxThree.js

@@ -0,0 +1,8 @@
+function BoxThree() {
+  return (
+    <h1 className='BoxThreeClass'>
+      This is the third box
+    </h1>
+  )
+
+}

public/Footer.js

@@ -0,0 +1,8 @@
+function Footer() {
+  return (
+    <h1 className='FooterClass'>
+      Foot
+    </h1>
+  )
+
+}

public/Header.js

@@ -0,0 +1,10 @@
+
+
+function Header() {
+  return (
+    <h1 className='HeaderClass'>
+      Head
+    </h1>
+  )
+
+}

public/Leftside.js

@@ -0,0 +1,8 @@
+function Leftside() {
+  return (
+    <h1 className='LeftsideClass'>
+      This is the Left
+    </h1>
+  )
+
+}

public/Main.js

@@ -1,3 +1,9 @@
 function Main(){
-  return <div>Hello</div>
-}
+  return(
+    <h1 className='MainClass'>
+      Tacos
+    </h1>
+
+  )
+
+}

public/NewBox.js

@@ -0,0 +1,8 @@
+function NewBox() {
+  return (
+    <h1 className='NewBoxClass'>
+      This is a new box
+    </h1>
+  )
+
+}

public/Nine.js

@@ -0,0 +1,10 @@
+function Nine() {
+  return (
+    <h1 className='NineClass'>
+      <marquee >
+        This is a nine
+      </marquee>
+    </h1>
+  )
+
+}

public/Rightside.js

@@ -0,0 +1,8 @@
+function Rightside() {
+  return (
+    <h1 className='RightsideClass'>
+      This is the Right
+    </h1>
+  )
+
+}

public/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="stylesheet" href="styles.css">
     <!--
       Notice the use of %PUBLIC_URL% in the tag above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -27,11 +28,11 @@
         "I just saw a movie that changed my life",
         "shirts are 50% of at Macy's today"
       ];
-    
+
     </script>
 
     <script>
-    
+
       var h1 = document.createElement("h1");
       h1.innerHTML = tweets[0];
       document.body.appendChild(h1);
@@ -41,7 +42,7 @@
     <script type="text/jsx">
     var tweet = React.createElement("h1",null,tweets[1])
     ReactDOM.render(
-      tweet, 
+      tweet,
       document.getElementById('root')
     );
     </script>
@@ -55,6 +56,18 @@
       To begin the development, run `npm start`.
       To create a production bundle, use `npm run build`.
     -->
-
+
+    <script src='Nine.js' type='text/jsx'></script>
+    <script src='BoxThree.js' type='text/jsx'></script>
+    <script src='NewBox.js' type='text/jsx'></script>
+    <script src='Box.js' type='text/jsx'></script>
+    <script src='Rightside.js' type='text/jsx'></script>
+    <script src='Leftside.js' type='text/jsx'></script>
+    <script src='Footer.js' type='text/jsx'></script>
+    <script src='Header.js' type='text/jsx'></script>
+    <script src='Main.js' type='text/jsx'></script>
+    <script src='App.js' type='text/jsx'></script>
+    <script src='index.js' type='text/jsx'></script>
+
   </body>
 </html>

public/styles.css

@@ -0,0 +1,100 @@
+
+
+
+
+.container {
+    display: grid;
+    grid-template-columns: 100px 1fr 1fr 100px;
+    grid-template-rows: repeat(3, 1fr);
+    grid-template-areas:
+    'leftside head . rightside'
+    'main box newbox .'
+    'boxthree . foot nine';
+    grid-gap: 10px 10px;
+    margin: 10px;
+}
+
+
+
+
+
+.HeaderClass {
+  background-color: red;
+  grid-area: head;
+}
+
+
+.FooterClass {
+  background-color: blue;
+  grid-area: foot;
+}
+
+.MainClass {
+  background-color: green;
+  grid-area: main;
+}
+
+.LeftsideClass {
+  background-color: powderblue;
+  grid-area: leftside;
+}
+
+.RightsideClass {
+  background-color: orange;
+  grid-area: rightside;
+}
+
+
+
+.BoxClass {
+  background-color: purple;
+  grid-area: newbox;
+}
+
+.NewBoxClass {
+  background-color: yellow;
+  grid-area: box;
+}
+
+.BoxThreeClass {
+  background-color: pink;
+  grid-area: boxthree;
+}
+
+.NineClass {
+  background-color: brown;
+  grid-area: nine;
+}
+
+
+
+
+@media only screen and (min-width : 321px) and (max-width : 511px)  {
+  .container {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(auto, 1fr);
+      grid-template-areas:
+      'leftside head'
+      'newbox rightside'
+      'main box '
+      'boxthree . '
+      'foot nine';
+      grid-gap: 10px 10px;
+  }
+}
+
+
+@media only screen and (min-width : 512px) and (max-width : 767px)  {
+  .container {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      grid-template-rows: repeat(auto, 1fr);
+      grid-template-areas:
+      'leftside head newbox'
+      'rightside main box '
+      '.boxthree . '
+      'foot nine.';
+      grid-gap: 10px 10px;
+  }
+}