Grid Ej1

Grid Ej1

by Juan Muñoz

HTML

<div class="site">
  
  <header class="masthead">masthead</header>
  <h1 class="page-title">page-title</h1>
  <main class="main-content">main content</main>
  <aside class="sidebar">sidebar</aside>
  <footer class="footer">footer</footer>
</div>

CSS

@supports not (display: grid) {
  div {
    background-color: black;
  }
}
@supports (display: grid) {
  div {
    background-color: red !important;
  }
}

*{
  color:white;
}
.site{
  display:grid;
  /* grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto 1fr 3fr; */
  grid-template-areas:
      "title title title"
      "main header header"
      "main sidebar footer";
  background-color:green;
  grid-column-gap:40px;
}

.masthead{
  /* grid-column: 2/4;
  grid-row: 2/3; */
  background-color:black;
  grid-area: header;
}

.page-title{
  /* grid-column: 2/4;
  grid-row: 1/2; */
  background-color:yellow;
  color:black;
  grid-area: title;
}

.main-content{
  /* grid-column: 1/2;
  grid-row: 2/4; */
  background-color:gray;
  grid-area: main;
}
.sidebar{
  grid-area: sidebar;
  background-color:blue;
}
.footer{
  grid-area: footer;
  background-color:pink;
}

@media screen and (min-width:34em){
  .site{
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-areas:
        "title title title"
        "main header header"
        "main sidebar footer";
    /* background-color:green; */
    }
}