CSS Grid'de İçeriği Dikey Eksende Hizalama

Grid içeriğini dikey eksende hizalamak için ebeveyn öğede tanımlanan align-content özelliğini kullanırız.

Eksenin Başlangıcına Göre

Grid'deki öğelerimiz için dikey eksenin başlangıcına hizalama ayarlayalım:

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

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

Eksenin Ortasına Göre

Şimdi de öğeleri 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-content: 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;
}

Eksenin Sonuna Göre

Öğeleri dikey eksenin sonuna 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-content: 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;
}

Pratik Görevler

İki satıra yerleştirilmiş altı öğeden oluşan bir grid oluşturun. Öğeleri grid'in dikey ekseninin başlangıcına hizalayın.

Şimdi grid öğelerini iki satıra yerleştirin ve öğelerin grid'in dikey ekseninin ortasına hizalanmasını sağlayın.

Öğelerin hizalamasının grid'in dikey ekseninin sonuna göre yapılması için önceki görevi değiştirin.