Open nitish8899 opened 3 months ago
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); }
styles.css