CSS Grid

Resources:

css:

.header {
  grid-area: header;
  background-color: #fed330;
  padding: 20px;
}
 
.content {
  grid-area: content;
  background-color: #20bf6b;
  padding: 20px;
}
 
.sidebar {
  grid-area: sidebar;
  background-color: #45aaf2;
  padding: 20px;
}
 
.footer {
  grid-area: footer;
  background-color: #fd9644;
  padding: 20px;
}
 
.grid {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 3fr;
  grid-template-areas: 
    "header  header"
    "sidebar content"
    "footer  footer";
}
 
@media (max-width: 500px) {
  .wrapper {
    grid-template-columns: 4fr;
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
  }
}

html:

<div class="grid">
  <header class="header">Header</header>
  <article class="content">
    <h1>Content</h1>
  </article> 
  <aside class="sidebar">Sidebar</aside>
  <footer class="footer">Footer</footer>
</div>

Result:

Leave a Reply

Your email address will not be published. Required fields are marked *