CSS Grid ішіндегі мазмұнды екі ось бойынша туралау
Grid ішінде жиі мазмұнды бір уақытта
көлденең және тік осьтер бойынша туралау қажет болады.
Бұл мақсатта біз алдыңғы сабақта қарастырылған
екі қасиетті бірге қолдана аламыз:
justify-content және
align-content.
Тік осьтің басы мен көлденең осьтің соңы бойынша
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
justify-content: flex-end;
align-content: flex-start;
grid-template-columns: 100px 100px;
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>
#parent {
display: grid;
justify-content: flex-start;
align-content: flex-end;
grid-template-columns: 100px 100px;
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>
#parent {
display: grid;
justify-content: flex-end;
align-content: center;
grid-template-columns: 100px 100px;
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;
}
:
Практикалық тапсырмалар
Алты элементтен тұратын grid жасаңыз және оларды екі бағанға орналастырыңыз. Элементтерді grid-тің көлденең осьтің басы мен тік осьтің ортасы бойынша туралаңыз.
Енді grid элементтерін үш бағанға орналастырыңыз және элементтерді grid-тің көлденең осьтің ортасы мен тік осьтің соңы бойынша туралауын орнатыңыз.
Алдыңғы тапсырманы өзгертіңіз, элементтердің туралауы grid-тің көлденең осьтің соңы мен тік осьтің ортасы бойынша орындалатын болсын.
