CSS Grid'de Hücre İçi Çift Eksen Hizalama Kısayolu
place-items kısayol özelliği kullanılarak
grid hücreleri içindeki öğeler
her iki eksende aynı anda hizalanabilir.
Özellik, boşlukla ayrılmış iki değer alır.
İlk değerle öğenin dikey eksendeki,
ikinci değerle yatay eksendeki konumunu belirleriz.
Özellik ebeveyn öğede tanımlanır.
Bu özelliğin çalışmasını örneklerle inceleyelim.
Dikeyde Ortada ve Yatayda Başta
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
place-items: center 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;
}
:
Grid'imizi hata ayıklayıcıda inceleyelim:
Dikeyde Sonda ve Yatayda Ortada
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
place-items: end 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'imizi hata ayıklayıcıda inceleyelim:
Dikeyde Başta ve Yatayda Sonda
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
place-items: start 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;
}
:
Grid'imizi hata ayıklayıcıda inceleyelim:
Pratik Görevler
Altı öğeden oluşan, iki sütunlu bir grid oluşturun. Öğeleri yatay eksende başta ve dikey eksende ortada olacak şekilde hizalayın.
Şimdi öğeleri üç sütuna yerleştirin ve öğeleri yatay eksende ortada ve dikey eksende ortada olacak şekilde hizalayın.
Önceki görevi, öğelerin hizalamasının yatay eksende sonda ve dikey eksende başta olacak şekilde değiştirin.
