<!doctype html>

<title>#devPunks "HOLY Holy Grid🏆" CSS/HTML5 Mobile/Desktop Responsive Layout with Grid</title>

<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>

<link
  as=style
  href=index.css
  rel='preload stylesheet'
>

<style>
/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout */
aside { background: blue }

body {
  margin: 0;
  display: grid;

  grid-template-areas:
    "header header"
    "main   aside"
    "footer footer";

  grid-template-columns: 1fr 30vw;

  grid-template-rows: 10vh 80vh 10vh;
}
/* body > main, body > aside { flex: 1 } */
body > header { grid-area: header }
body > footer { grid-area: footer }

</style>


<header>Header</header>

<main>Main</main>
<aside>Aside</aside>

<footer>Footer</footer>

<script src=/browser-sync.es></script>

<!doctype html>

<title>#devPunks "HOLY Holy Grid🏆" CSS/HTML5 Mobile/Desktop Responsive Layout with Grid</title>

<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>

<link
  as=style
  href=index.css
  rel='preload stylesheet'
>

<style>
/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout */
aside { background: blue }

body {
  margin: 0;
  display: grid;

  grid-template-areas:
    "header header"
    "main   aside"
    "footer footer";

  grid-template-columns: 1fr 30vw;

  grid-template-rows:
    10vh 80vh 10vh;
}
/* body > main, body > aside { flex: 1 } */
body > header { grid-area: header }
body > footer { grid-area: footer }

</style>


<header>Header</header>

<main>Main</main>
<aside>Aside</aside>

<footer>Footer</footer>

<script src=/browser-sync.es></script>

Fix whitespace for grid-template eras
Fix whitespace for grid-template eras
