Позиционирање во ќелии на 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;
}
:
А сега да го погледнеме нашиот грид во дебагерот:
Практични задачи
Создадете грид, составен од пет елементи, поставени во три реда. Извршете позиционирање на елементите по хоризонталната оска.
Сега поставете ги елементите на гридот во два реда и зададете позиционирање на елементите во ќелиите по центарот на хоризонталната оска.
Променете ја претходната задача, така што позиционирањето на елементите да се случува по крајот на хоризонталната оска.
