CSS Grid'de Tek Bir Elemanın Yatay Eksende Hizalanması
Yatay eksende hizalama
sadece ebeveyn eleman için
değil, her bir çocuk eleman için ayrı ayrı da ayarlanabilir.
Bu amaçla
justify-self özelliği kullanılır.
Yatay eksenin başına hizalama
İlk elemanımızı yatay eksenin başına hizalayalım:
<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 {
justify-self: start;
}
:
Yatay eksenin ortasına hizalama
İlk elemanı yatay eksenin ortasına hizalayalım:
<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 {
justify-self: center;
}
:
Yatay eksenin sonuna hizalama
İlk elemanı yatay eksenin sonuna hizalayalım:
<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 {
justify-self: end;
}
:
Pratik Görevler
İki satıra yerleştirilmiş beş elemandan oluşan bir grid oluşturun. İkinci elemanın yatay eksenin başına hizalanmasını sağlayın.
Şimdi grid elemanlarını üç satıra yerleştirin ve üçüncü elemanın gridin yatay ekseninin ortasına hizalanmasını sağlayın.
Beşinci elemanın yatay eksenin sonuna hizalanması için önceki görevi değiştirin.