CSS Grid'de İçeriği Her İki Eksende Hizalama

Grid'de içeriğin aynı anda hem yatay hem de dikey eksenler boyunca hizalanması gerekebilir. Bu amaçla, önceki derste ele aldığınız iki özelliği birlikte kullanabiliriz: justify-content ve align-content.

Dikeyin Başına ve Yatayın Sonuna Göre

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

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

Dikeyin Sonuna ve Yatayın Başına Göre

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

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

Dikey Eksenin Ortasına ve Yatay Eksenin Ortasına Göre

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

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

Pratik Görevler

Altı elemandan oluşan bir grid oluşturun ve bunları iki sütuna yerleştirin. Elemanları grid'in yatay eksenin başına ve dikey eksenin ortasına göre hizalayın.

Şimdi grid elemanlarını üç sütuna yerleştirin ve elemanları grid'in yatay eksenin ortasına ve dikey eksenin sonuna göre hizalayın.

Önceki görevi, elemanların grid'in yatay eksenin sonuna ve dikey eksenin ortasına göre hizalanacak şekilde değiştirin.