CSS Grid Hücre İçi Dikey Eksen Hizalama

Grid hücreleri içindeki öğeleri dikey eksende hizalamak için ana öğe üzerinde tanımlanan align-items özelliğini kullanırız. Bu özelliğin çalışmasını tarayıcı hata ayıklayıcısında grid'i incelerken görebilirsiniz.

Eksenin Başlangıcına Göre

Şimdi öğelerimizi hücreler içinde dikey eksenin başlangıcına hizalayalım:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	align-items: flex-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 tarayıcı hata ayıklayıcısında inceleyelim:

Eksenin Ortasına Göre

Şimdi öğelerimizi hücreler içinde dikey eksenin ortasına hizalayalım:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	align-items: 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 tarayıcı hata ayıklayıcısında inceleyelim:

Eksenin Sonuna Göre

Öğelerin hizalamasını bu kez dikey eksenin sonuna göre değiştirelim:

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	align-items: 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;
}
#elem1 {
	
}

Grid'imizi tarayıcı hata ayıklayıcısında inceleyelim:

Pratik Görevler

İki sütuna yerleştirilmiş altı öğeden oluşan bir grid oluşturun. Hücreler içindeki öğeleri dikey eksenin başlangıcına hizalayın.

Şimdi grid öğelerini üç sütuna yerleştirin ve hücreler içindeki öğeleri grid'in dikey ekseninin ortasına hizalayın.

Önceki görevi, öğelerin hizalamasının dikey eksenin sonuna göre yapılacak şekilde değiştirin.