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.