CSS тор торкыштарының ішіндегі көлденеңінен туралау
Тор торкыштарының ішіндегі элементтерді туралау үшін,
яғни бағандар мен қатарлар қиылысында пайда болатын аймақтарда,
ата-элементте орнатылатын justify-items қасиеті қолданылады.
Туралауды ең айқын браузердің жөндеу құралында торды қарағанда байқауға болады.
Ось басы бойынша
Элементтерді торкыштар ішінде көлденең осьтің басы бойынша туралайық:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
justify-items: start;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
height: 200px;
width: 400px;
border: 2px solid #696989;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
Енді торды браузердің жөндеу құралында қарайық:
Ось ортасы бойынша
Элементтерді торкыштарда көлденең осьтің ортасы бойынша туралайық:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
justify-items: center;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
Енді торды браузердің жөндеу құралында қарайық:
Ось соңы бойынша
Элементтерді көлденең осьтің соңы бойынша туралайық:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
justify-items: end;
grid-template-columns: 100px 100px;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
border: 2px solid #696989;
height: 200px;
width: 400px;
}
#parent > div {
grid-gap: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
Енді торды браузердің жөндеу құралында қарайық:
Практикалық тапсырмалар
Бес элементтен тұратын, үш қатарға орналасқан тор жасаңыз. Элементтердің көлденең ось бойынша туралауын орындаңыз.
Енді тор элементтерін екі қатарға орналастырып, торкыштардағы элементтердің көлденең осьтің ортасы бойынша туралануын тағайындаңыз.
Алдыңғы тапсырманы өзгертіп, элементтердің туралауы көлденең осьтің соңы бойынша жүреді етіңіз.
