Eksplicitiniai Grid'ai
Gridų sistema reiškia eksplicitinių ir implicitinių tinklelių naudojimą. Leiskite išsamiau paanalizuoti šias sąvokas.
Eksplicitinis grid'as reiškia elementų rinkinį, išdėstytą stulpeliais ir eilėmis. Dažnai eksplicitinis tinklelis kuriamas rankiniu būdu ir visi grid'ai, kuriuos mes sukūrėme kartu ankstesnėse pamokose yra eksplicitiniai (pavyzdžiui, pamoka plytelės grid'e).
Sukurkime lentelę, kuri ir bus mūsų eksplicitinis grid'as:
<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;
}
:
