Eka eka eka eka eka eka eka eka eka eka eka eka eka eka eka eka eka eka eka eka eka eka eka eka eka kea
Navigointi
Kolmas
Neljäs
Eka eka eka eka eka eka eka eka
Toka
Kolmas
Neljäs
Viides
CSS
div > div { border: 1px solid red; } .grid { display: grid; grid-template-columns: 1fr 65vw 1fr; column-gap: 1em; row-gap: 5px; grid-auto-rows: 3em; /* seuraava rivi on skaalautuvampi */ grid-auto-rows: minmax(3em, auto); /* nimetään gridin ruudut */ grid-template-areas: "header header header" "leftbar content rightbar" "footer footer footer"; } .grid2 { display: grid; grid-template-rows: 3em; row-gap: 5px; grid-auto-columns: 15em; } /* asetetaan tälle tarkka paikka gridissä koordinaatteina */ .toka { grid-column: 1 / 3; grid-row: 2; } /* sijoitetaan sisältö nimien perusteella */ .main { grid-area: content; background-color: white; border: 0; } .header { grid-area: header; background-color: silver; border: 0; } .leftbar { grid-area: leftbar; background-color: silver; border: 0; } .rightbar { grid-area: rightbar; background-color: silver; border: 0; }
HTML
<div class="grid"> <div class="main">Eka eka eka eka eka eka eka eka eka eka eka eka eka eka eka eka eka eka eka eka eka eka eka eka eka kea</div> <div class="header">Navigointi</div> <div class="leftbar">Kolmas</div> <div class="rightbar">Neljäs</div> </div> <div class="grid2"> <div>Eka eka eka eka eka eka eka eka</div> <div class="toka">Toka</div> <div>Kolmas</div> <div>Neljäs</div> <div>Viides</div> </div>
Javascript
Konsoli