Skip to content

49 - Holy Grail - vanilla #539

@alaa-salloum

Description

@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;
  }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions