CSS Grid'de Tek Bir Öğenin Her İki Eksende Hizalanması

Bir öğe, justify-self ve align-self özelliklerini birleştirerek hem yatay hem de dikey eksenlerde aynı anda hizalanabilir.

Yatayda başlangıca ve dikeyde ortaya

İlk öğemiz için hizalamayı yatay eksende başlangıca ve dikey eksende ortaya ayarlayalı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;
	align-self: center;
}

Yatayda ortaya ve dikeyde başlangıca

Şimdi ilk öğenin hizalamasını yatay eksende ortaya ve dikey eksende başlangıca ayarlayalı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;
	align-self: start;
}

Yatayda sona ve dikeyde ortaya

İlk öğenin hizalamasını yatay eksende sona ve dikey eksende ortaya ayarlayalı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;
	align-self: center;
}

Pratik Görevler

İki satırdan oluşan ve altı öğe içeren bir grid oluşturun. İkinci öğenin hizalamasını yatay eksende başlangıca ve dikey eksende ortaya gelecek şekilde ayarlayın.

Şimdi öğeleri üç satıra yerleştirin ve üçüncü öğenin hizalamasını yatay eksende ortaya ve dikey eksende sona gelecek şekilde ayarlayın.

Dördüncü öğenin hizalamasının yatay eksende sona ve dikey eksende ortaya gelecek şekilde olması için önceki görevi değiştirin.

Şimdi, beşinci öğenin hizalamasının yatay eksende başlangıca ve dikey eksende başlangıca, altıncı öğenin hizalamasının ise yatay eksende sona ve dikey eksende ortaya gelecek şekilde olmasını sağlayın.