JSFiddle - React, Tailwind, and code Playground

by Artem

HTML

<section id="grid">
  <header>Я header</header>
  <nav>Я nav</nav>
  <aside>Я aside</aside>
  <main>
    <p>Я main</p>
    <p>во мне много текста</p>
  </main>
  <footer>Я footer<br>Я footer<br>Я footer<br>Я footer<br>Я footer<br></footer>
  <address>Я address</address>
  <p id="wild">asas</p>
</section>

CSS

#grid {
  display: grid;
  grid-template-areas: "left topcenter right" 
                        "foot1 center foot2"
                        "foot1    lol   foot2";
}

#grid > header {
  grid-area: topcenter;
}

#grid > nav {
  grid-area: left;
}

#grid > aside {
  grid-area: right;
}

#grid > main {
  grid-area: center;
}

#grid > footer {
  grid-area: foot1;
}

#grid > address {
  grid-area: foot2;
}

#grid > * {
  border: 1px solid;
}

#wild {
  grid-area: lol;
  align-self: stretch;
}

p {
  margin: 0;
}