Ішкі CSS торлары
Тор жүйесінде өз құрған торыңызға жаңа ішкі тор қосуға болады. Ішкі торлар сайт блоктарының ішіндегі кішкентай элементтерді орналастыруда кеңінен қолданылады.
Осы мүмкіндікті пайдалану үшін, бала элементтің өзінде
display қасиетіне grid мәні беру керек.
Мысал ретінде тордың бір ұяшығында тағы бір тор жасайық:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
#parent {
display: grid;
grid-template: 1fr 1fr / 1fr 1fr;
grid-gap: 5px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem4 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 5px;
border: 2px solid #696989;
}
#elem4 > div {
grid-gap: 5px;
padding: 6px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
Сізде үш бағанда орналасқан бес элементтен тұратын тор бар делік. Екінші элементте өз кезегінде үш бала элементі бар ішкі тор жасаңыз.
Алдыңғы тапсырманы өзгертіп, ішкі торда бес бала элементі болуы керек.
Бірінші және үшінші элементтердің әрқайсысында үш бала элементі бар ішкі тор жасаңыз.
