CSS Grid'de Tek Bir Öğeyi Hizalamak için Kısayol
Tek bir öğeyi hem yatay hem de dikey eksenlerde
aynı anda hizalayabilirsiniz.
Bunun için place-self özelliği kullanılır.
Bu özellik, boşlukla ayrılmış iki değer alır.
İlk değer dikey hizalamayı,
ikincisi ise yatay hizalamayı belirtir.
Haydi örneklerle inceleyelim.
Dikeyde ortaya ve yatayda başa hizalama
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
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;
}
#elem1 {
place-self: center start;
}
:
Dikeyde başa ve yatayda sona hizalama
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
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;
}
#elem1 {
place-self: start end;
}
:
Dikeyde sona ve yatayda ortaya hizalama
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
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;
}
#elem1 {
place-self: end center;
}
:
Pratik Görevler
Beş öğeden oluşan bir grid oluşturun ve bunları üç satıra yerleştirin. İlk öğenin hizalamasını yatay eksende başa ve dikey eksende ortaya gelecek şekilde yapın.
Önceki görevi, üçüncü öğenin hizalamasının yatay eksende sona ve dikey eksende ortaya gelecek şekilde olması için değiştirin.
Şimdi grid öğelerini iki satıra yerleştirin ve beşinci öğenin hizalamasını yatay eksende ortaya ve dikey eksende sona gelecek şekilde ayarlayın.
İkinci öğenin yatay eksende başa ve dikey eksende sona, dördüncü öğenin ise yatay eksende ortaya ve dikey eksende başa hizalanacak şekilde ayarlayın.
