Bruke grid-layout til å dele opp nettside s. 117

Rediger CSS slik at designet likner på bildet nedenfor.

[INLINEOBJECT]

Skriv inn/rediger koden:

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Oppgave 4.2</title> <style> main { display: grid; /* Tre kolonner med bredde 70 px - tilpasset bredden tilgjengelig - 70 px*/ /*15 piksler mellom kolonnene*/ /*5piksler mellom radene*/ /*minimum radehøyde 70*/ /*Tre rader med radhøyder 70 px - tilpasset høyden tilgjengelig - 70 px*/ } main > article { background-color: lightgreen; } header { background-color: lightgray; } footer { background-color: lightgray; } </style> </head> <body> <header> <h1>Overskrift i header</h1> </header> <main> <article>grid-element 1</article> <article>grid-element 2</article> <article>grid-element 3</article> <article>grid-element 4</article> <article>grid-element 5<br><br><br><br><br><br><br><br><br><br><br><br><br>Sist i grid-element 5</article> <article>grid-element 6</article> <article>grid-element 7</article> <article>grid-element 8</article> </main> <footer> <h3>Undertekst i footer</h3> </footer> </body> </html>

Resultat av koden: