Eksplitsiitsed grid-id
Gridi süsteem eeldab eksplitsiitsete ja implitsiitsete võrkude kasutamist. Uurigem neid mõisteid detailsemalt.
Eksplitsiitne grid kujutab endast elementide kogumit, mis on paigutatud veergudesse ja ridadesse. Sageli luuakse eksplitsiitne võrk käsitsi ja kõik grid-id, mille me koos eelmistes õppetundides loome, on eksplitsiitsed (näiteks õppetund plaadid grid-is).
Loome tabeli, mis on meie eksplitsiitne grid:
<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;
}
:
