Rrjetat e nënkuptuara në CSS
Rrjetë e nënkuptuar krijohet automatikisht nga shfletuesi, kur numri i elementeve nuk përshtatet në rrjetën e shprehur. Le të shohim se si ndodh kjo.
Le të kemi katër blloqe:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem3">4</div>
</div>
Le të supozojmë që rrjetaja jonë ka përmasa
3 me 3:
#parent {
display: grid;
grid-template-columns: 50px 50px 50px;
grid-template-rows: 50px 50px 50px;
}
Le të vendosim tre blloqet tona sipas rrjetës:
#elem1 {
grid-row: 1 / 2;
grid-column: 1 / 2;
}
#elem2 {
grid-row: 2 / 3;
grid-column: 2 / 3;
}
#elem3 {
grid-row: 3 / 4;
grid-column: 3 / 4;
}
Dhe bllokun e katërt do ta vendosim në rreshtin e katërt dhe kolonën e katërt:
#elem4 {
grid-row: 4 / 5;
grid-column: 4 / 5;
}
Meqenëse rrjetaja jonë është me përmasa
3 me 3, atëherë një
rreshti i katërt dhe kolonë e katërt nuk do të ekzistojnë në këtë
rrjetë. Por ato nuk do të ekzistojnë në formë të shprehur,
domethënë në atë që kemi përcaktuar ne. Por shfletuesi
do t'i krijojë ato në mënyrë të nënkuptuar, domethënë vetë.
Në këtë rast, meqenëse ne kemi specifikuar përmasa vetëm për rrjetën e shprehur, atëherë për qelizat jashtë kësaj rrjetë përmasat do të llogariten nga shfletuesi. Domethënë në rastin tonë përmasat e bllokut të katërt do të caktohen automatikisht nga shfletuesi.
Le të shohim se çfarë kemi marrë:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
display: grid;
grid-template-columns: 50px 50px 50px;
grid-template-rows: 50px 50px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
grid-column: 1 / 2;
}
#elem2 {
grid-row: 2 / 3;
grid-column: 2 / 3;
}
#elem3 {
grid-row: 3 / 4;
grid-column: 3 / 4;
}
#elem4 {
grid-row: 4 / 5;
grid-column: 4 / 5;
}
:
Le të supozojmë se në rrjetën tuaj ka 6 blloqe.
Vendosni 3 blloqe në rrjetën
e shprehur, dhe tre blloqe në atë të nënkuptuar.
