Ashkanph · April 23, 2019 11:05
diff --git a/responsive-css-grid.html b/responsive-css-grid.html
 <!DOCTYPE html>
 <html>
 <!-- Source:   https://glitch.com/edit/#!/grid-grail?path=index.html:1:0 -->
 <!-- Demo:     https://grid-grail.glitch.me/ -->
  <head>
    <title>Hello!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/reset.css">
    <link rel="stylesheet" href="/styles.css">
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: arial;
        }

        .container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }


        @media (min-width: 768px) {
            .container {
                display: grid;
                grid-template-columns: 200px 1fr 200px;
                grid-template-rows: auto 1fr auto;

            }
        }

        header {
            grid-column: span 3;
            padding: 30px;
            text-align: center;
            font-size: 1.4em;
            background-color: #369;
            color: white;
        }

        main {
            flex: 1;
            padding: 20px;
        }

        nav {
            background-color: #f90;
            padding: 20px;
        }
        
        aside {
            padding: 20px;
            background-color: #936;
        }

        footer {
            grid-column: span 3;
            padding: 30px;
            text-align: center;
            font-size: 1.4em;
            background-color: #690;
            color: white;
        }

        h1 {
            margin-bottom: 1em;
            font-size: 1.3em;
            font-weight: bold;
        }
    </style>
  </head>
  <body class="container">
   <header>Header</header>
   <nav>Navigation</nav>
   <main>
     <h1>Main</h1>
     <p>Vestibulum consectetur sit amet nisi ut consectetur. Praesent efficitur, nibh vitae fringilla scelerisque, est neque faucibus quam, in iaculis purus libero eget mauris. Curabitur et luctus sapien, ac gravida orci. Aliquam erat volutpat. In hac habitasse platea dictumst. Aenean commodo, arcu a commodo efficitur, libero dolor mollis turpis, non posuere orci leo eget enim. Curabitur sit amet elementum orci, pulvinar dignissim urna. Morbi id ex eu ex congue laoreet. Aenean tincidunt dolor justo, semper pretium libero luctus nec. Ut vulputate metus accumsan leo imperdiet tincidunt. Phasellus nec rutrum dolor. Cras imperdiet sollicitudin arcu, id interdum nibh fermentum in.</p>
     </main>
     <aside>Related links</aside>
     <footer>Footer</footer>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<!-- Source: https://glitch.com/edit/#!/grid-grail?path=index.html:1:0 -->
	<!-- Demo: https://grid-grail.glitch.me/ -->
	<head>
	<title>Hello!</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="/reset.css">
	<link rel="stylesheet" href="/styles.css">
	<style>
	*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: arial;
	}

	.container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	}


	@media (min-width: 768px) {
	.container {
	display: grid;
	grid-template-columns: 200px 1fr 200px;
	grid-template-rows: auto 1fr auto;

	}
	}

	header {
	grid-column: span 3;
	padding: 30px;
	text-align: center;
	font-size: 1.4em;
	background-color: #369;
	color: white;
	}

	main {
	flex: 1;
	padding: 20px;
	}

	nav {
	background-color: #f90;
	padding: 20px;
	}

	aside {
	padding: 20px;
	background-color: #936;
	}

	footer {
	grid-column: span 3;
	padding: 30px;
	text-align: center;
	font-size: 1.4em;
	background-color: #690;
	color: white;
	}

	h1 {
	margin-bottom: 1em;
	font-size: 1.3em;
	font-weight: bold;
	}
	</style>
	</head>
	<body class="container">
	<header>Header</header>
	<nav>Navigation</nav>
	<main>
	<h1>Main</h1>
	<p>Vestibulum consectetur sit amet nisi ut consectetur. Praesent efficitur, nibh vitae fringilla scelerisque, est neque faucibus quam, in iaculis purus libero eget mauris. Curabitur et luctus sapien, ac gravida orci. Aliquam erat volutpat. In hac habitasse platea dictumst. Aenean commodo, arcu a commodo efficitur, libero dolor mollis turpis, non posuere orci leo eget enim. Curabitur sit amet elementum orci, pulvinar dignissim urna. Morbi id ex eu ex congue laoreet. Aenean tincidunt dolor justo, semper pretium libero luctus nec. Ut vulputate metus accumsan leo imperdiet tincidunt. Phasellus nec rutrum dolor. Cras imperdiet sollicitudin arcu, id interdum nibh fermentum in.</p>
	</main>
	<aside>Related links</aside>
	<footer>Footer</footer>
	</body>
	</html>