CSS гридда ичкировни икки ўқ бўйлаб тегиш
Гридда кўпинча ичкировни горизонтал ва
вертикал ўқлар бўйлаб бир вақтнинг ўзида тегиш талаб қилиниши мумкин.
Бу мақсадда биз олдинги дарсда ўрганган иккита хусусиятни
бирга ишлата оламиз:
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;
}
:
Амалий вазифалар
Олтита элементдан иборат грид яратинг ва уларни иккита устунга жойланг. Элементларни гриднинг горизонтал ўқи бўйича бошига ва вертикал ўқи бўйича марказига тегинг.
Энди грид элементларини учта устунга жойлаштиринг ва уларни гриднинг горизонтал ўқи бўйича марказига ва вертикал ўқи бўйича охирига тегишни белгиланг.
Олдинги вазифани ўзгартиринг, элементларни гриднинг горизонтал ўқи бўйича охирига ва вертикал ўқи бўйича марказига тегиш амалга оширилсин.