CodePen Embed - CSS Grid RWD

Live
​x
 
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Grid</title>
    <style>
      body {
        font-family: sans-serif;
      }
​
      header {
        grid-area: header;
      }
​
      nav {
        grid-area: nawigacja;
      }
​
      aside {
        grid-area: ads;
      }
​
      section.one {
        grid-area: section1;
      }
​
      section.two {
        grid-area: section2;
      }
​
      footer {
        grid-area: stopka;
      }
​
      .grid {
        /* Tego ustawienia siatki będziemy używać na dużych ekranach. */
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: minmax(200px, auto);
        gap: 10px;
        width: 100%;
        margin: 20px 0;
        grid-template-areas:
          "header header header header"
          "section1 section1 nawigacja nawigacja"
          "section1 section1 ads ads"
          "section2 section2 section2 section2"
          "stopka stopka stopka stopka";
      }
​
      /* Tego ustawienia siatki będziemy używać na średnich ekranach. */
      @media screen and (min-width: 501px) and (max-width: 768px) {
        .grid {
          grid-template-columns: repeat(2, 1fr);
          grid-template-areas:
            "header header"
            "nawigacja ads"
            "section1 section1"
            "section2 section2"
            "stopka stopka";
        }
      }
​
      /* Tego ustawienia siatki będziemy używać na małych ekranach. */
      @media screen and (max-width: 500px) {
        .grid {
          grid-template-columns: repeat(1, 1fr);
          grid-template-areas:
            "header"
            "nawigacja"
            "section1"
            "ads"
            "section2"
            "stopka";
        }
      }
​
      .grid > * {
        background: lightskyblue;
        padding: 20px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>CSS Grid ❤ media-query</h2>
    <div class="grid">
      <header>Nagłówek</header>
      <nav>Nawigacja</nav>
      <aside>Reklamy</aside>
      <section class="one">Sekcja nr 1</section>
      <section class="two">Sekcja nr 2</section>
      <footer>Stopka</footer>
    </div>
  </body>
</html>
​
This Pen is owned by frontstack on CodePen.
See more by @frontstack on CodePen
External CSS

This Pen doesn't use any external CSS resources.
External JavaScript

This Pen doesn't use any external JavaScript resources.