Eksplisiittiset gridit
Grid-järjestelmä edellyttää eksplisiittisten ja implisiittisten verkkojen käyttöä. Käydään näitä käsitteitä läpi tarkemmin.
Eksplisiitti grid edustaa kokoelmaa elementtejä, jotka on sijoitettu sarakkeisiin ja riveihin. Usein eksplisiittinen verkko luodaan manuaalisesti ja kaikki gridit, jotka olemme luoneet aiemmissa oppitunneissa ovat eksplisiittisiä (esimerkiksi oppitunti Laattoja gridissä).
Luodaan taulukko, joka tulee olemaan eksplisiitti gridimme:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
