49 - Holy Grail - vanilla

[alaa-salloum]

styles.css

.holy-grail {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
}

.holy-grail header {
  grid-column: 1 / 4;
  align-self: flex-start;
}
.holy-grail footer {
  grid-column: 1 / 4;
  align-self: flex-end;
}

@media screen and (max-width: 1024px) and (min-width: 640px){
  .holy-grail {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr 1fr auto;
    justify-content: center;
    text-align: center;
    min-height: 100vh;
  }
  .holy-grail header {
    grid-column: 1 / 3;
    align-self: auto;
  }
  .holy-grail footer {
    grid-column: 1 / 3;
    align-self:auto;
  }
  .holy-grail main {
    grid-column: 1 / 3;
    grid-row: 2;
  }
}

@media screen and (max-width: 640px){
  .holy-grail {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5,auto);
    justify-content: center;
    text-align: center;
    min-height: 100vh;
  }
  .holy-grail header {
    grid-column: 1;
    align-self: auto;
  }
  .holy-grail footer {
    grid-column: 1;
    align-self:auto;
  }
  .holy-grail main {
    grid-row: 2;
  }
}