49 - Holy Grail - vanilla

[nitish8899]

styles.css

.holy-grail {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

header {
  padding: 2rem;
  grid-column: 1 / 4;
}

.left-side {
  grid-column: 1 / 2;
}

main {
  grid-column: 2 / 3;
}

.right-side {
  grid-column: 3 / 4;
}

footer {
  grid-column: 1 / 4;
}
        

/* FOR DEMO PURPOSE  */
body {
  font-family: sans-serif;
}

:root {
  --coral: hsl(300, 100%, 93%);
  --coral--b: hsl(280, 100%, 70%);
  --blue: hsl(200, 100%, 90%);
  --blue--b: hsl(200, 100%, 80%);
  --green: hsl(113, 85%, 95%);
  --green--b: hsl(84, 71%, 53%);
  --yellow: hsl(30, 100%, 93%);
  --yellow--b: hsl(40, 100%, 80%);
}

div > * {
  padding: 1rem;
}

div:nth-of-type(1):not(:has(div)) {
  background-color: var(--blue);
  border: 1px solid var(--blue--b);
}

div:nth-of-type(2):not(:has(div)) {
  background-color: var(--green);
  border: 1px solid var(--green--b);
}

main {
  background-color: var(--yellow);
  border: 1px solid var(--yellow--b);
}

header, footer {
  background-color: var(--coral);
  border: 1px dashed var(--coral--b);
}