CSS-тегі жасырын торлары
Жасырын тор браузер арқылы автоматты түрде жасалады, элементтер саны анық торға сыймаған кезде. Бұл қалай жүретінін көрейік.
Бізде төрт блок бар делік:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem3">4</div>
</div>
Біздің тордың өлшемі
3-ке 3 болсын:
#parent {
display: grid;
grid-template-columns: 50px 50px 50px;
grid-template-rows: 50px 50px 50px;
}
Үш блокты тор бойынша орналастырайық:
#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;
}
Біздің тордың өлшемі
3-ке 3 болғандықтан,
торда төртінші қатар және баған болмайды.
Бірақ олар анық түрде болмайды,
яғни біз белгілегендей емес.
Бірақ браузер оларды жасырын түрде,
яғни өзі жасайды.
Бұл ретте, біз өлшемдерді тек анық тор үшін көрсеткендіктен, осы тордан тыс ұяшықтардың өлшемдерін браузер есептейді. Яғни біздің жағдайда төртінші блоктың өлшемдері браузер арқылы автоматты түрде белгіленеді.
Бізде ненің шыққанын көрейік:
<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;
}
:
Сіздің торыңызда 6 блок бар делік.
3 блокты анық торда орналастырыңыз,
ал үш блокты жасырын торда орналастырыңыз.
