CSS Grid'de Tek Bir Öğenin Dikey Eksende Hizalanması

Benzer şekilde, öğeleri dikey eksende align-self özelliği kullanarak hizalayabilirsiniz. Nasıl çalıştığını örneklerle görelim.

Dikey eksenin başına hizalama

İlk öğe için dikey eksenin başına hizalamayı ayarlayalım:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">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 {
	align-self: start;
}

Dikey eksenin merkezine hizalama

İlk öğe için dikey eksenin merkezine hizalamayı 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 {
	align-self: center;
}

Dikey eksenin sonuna hizalama

Grid'deki ilk öğemiz için dikey eksenin sonuna hizalamayı 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 {
	align-self: end;
}

Pratik Görevler

İki sütuna yerleştirilmiş beş öğeden oluşan bir grid oluşturun. Üçüncü öğenin grid'in dikey eksenin başına hizalanmasını sağlayın.

Şimdi grid öğelerini üç sütuna yerleştirin ve ikinci öğenin grid'in dikey eksenin merkezine hizalanmasını sağlayın.

Dördüncü ve beşinci öğelerin sırasıyla dikey eksenin sonuna ve başına hizalanması için önceki görevi değiştirin.