Css grid

testing

by schrodingers

HTML

<div class="grid">
  <header class="header">
    <div class="logo">
      <svg></svg>
    </div>
    <h1>
  Header
  </h1>
  </header>

  <nav class="menu">Menu
    <ul>
      <li class="link"><a href="#">Main</a></li>
      <li class="link"><a href="#">About</a></li>
      <li class="link"><a href="#">Portfolio</a></li>
      <li class="link"><a href="#">Contacts</a></li>
    </ul>
  </nav>

  <main class="main">
    <h2>
  Chapter II
  </h2>
    <p>
      'Curiouser and curiouser!' cried Alice (she was so much surprised, that for the moment she quite forgot how to speak good English); 'now I'm opening out like the largest telescope that ever was! Good-bye, feet!' (for when she looked down at her feet,
      they seemed to be almost out of sight, they were getting so far off). 'Oh, my poor little feet, I wonder who will put on your shoes and stockings for you now, dears? I'm sure I shan't be able! I shall be a great deal too far off to trouble myself
      about you: you must manage the best way you can;—but I must be kind to them,' thought Alice, 'or perhaps they won't walk the way I want to go! Let me see: I'll give them a new pair of boots every Christmas.'
    </p>
    <p>
      And she went on planning to herself how she would manage it. 'They must go by the carrier,' she thought; 'and how funny it'll seem, sending presents to one's own feet! And how odd the directions will look! 
      </p>
      <pre>
      Alice's Right Foot, Esq. 
        Hearthrug, 
          near The Fender, 
            (with Alice's love). 
      </pre>
      
      <p>
      Oh dear, what nonsense I'm talking!'
      </p>
  </main>
  <footer class="footer">Footer</footer>
</div>

CSS

:root { --gutter: 1.5em; }
@media (min-width: 30em) {
  :root { --gutter: 2em; }
}
@media (min-width: 48em) {
  :root { --gutter: 3em; }
}

.Container {
  margin: 0 auto;
  max-width: 60em;
  padding: var(--gutter);
}

.Grid {
  --gutterNegative: calc(-1 * var(--gutter));
  margin-left: var(--gutterNegative);
  margin-top: var(--gutterNegative);
}

.Grid-cell {
  margin-left: var(--gutter);
  margin-top: var(--gutter);
}

@media (min-width: 48em) {
  .Grid {
    display: flex;
  }
  .Grid-cell {
    flex: 1;
  }
}


/* The styles below aren't relevant to the demo. */

* {
  font: inherit;
  margin: 0;
  padding: 0;
}

body {
  color: #333;
  font: 1em/1.25 'Helvetica Neue', sans-serif;
}

header {
  background-color: hsl(30, 15%, 95%);
}

h1 {
  font-size: 3em;
  line-height: 1;
  margin: .25em 0;
}

@media (min-width: 48em) {
  h1 {
    font-size: 4em;
  }
}

h2 {
  font-size: 1.5em;
}

p {
  margin: 1em 0;
}

a {
  color: hsl(165, 60%, 40%);
}

JavaScript

//https://www.gutenberg.org/files/11/11-h/11-h.htm#link2HCH0002