Coming Soon Lay-Out with CSS Grid-Template-Areas

Hello Mentors!

Every project gives me the opportunity to learn something new. This is the first time I worked with the Grid-Template-Areas property. It improved my workflow. I will definitely going to use it on future projects to learn more about CSS Grid.

.container {
  max-width: 23.438rem;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  justify-items: center;
  grid-template-areas:
    "header"
    "hero"
    "main"
    "footer";
  @media only screen and (min-width: $desktop) {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header hero"
      "main hero"
      "footer hero";
    background-image: url(../images/bg-pattern-desktop.svg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: left bottom;
    background-size: contain;
  }
}