CSS Grid Hücreleri İçinde Çift Eksen Hizalama

Grid hücreleri içindeki öğeleri hem yatay hem de dikey eksenlerde aynı anda hizalayabilirsiniz. Bu amaçla, ebeveyn öğede tanımlanan justify-items ve align-items özelliklerini birleştirebiliriz.

Eksenlerin Merkezinde

Şimdi öğelerimizi yatay ve dikey eksenlerin merkezine hizalayalım:

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

#parent {
	display: grid;
	justify-items: center;
	align-items: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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;
}

Şimdi grid'imizi hata ayıklayıcıda inceleyelim:

Yatay Eksenin Başında ve Dikey Eksenin Sonunda

Şimdi öğelerimizi hücrelerde, yatay eksenin başında ve dikey eksenin sonunda konumlandıralım:

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

#parent {
	display: grid;
	justify-items: start;
	align-items: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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;
}

Şimdi grid'imizi hata ayıklayıcıda inceleyelim:

Yatay Eksenin Sonunda ve Dikey Eksenin Başında

Şimdi öğelerimizi hücrelerde, yatay eksenin sonunda ve dikey eksenin başında konumlandıralım:

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

#parent {
	display: grid;
	justify-items: end;
	align-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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;
}

Şimdi grid'imizi hata ayıklayıcıda inceleyelim:

Pratik Görevler

Üç satıra yerleştirilmiş beş öğeden oluşan bir grid oluşturun. Hücrelerdeki öğeleri yatay eksenin başlangıcına ve dikey eksenin merkezine hizalayın.

Şimdi grid öğelerini iki satıra yerleştirin ve hücrelerin içindeki öğeleri yatay eksenin merkezine ve dikey eksenin başlangıcına hizalayın.

Önceki görevi, öğelerin hücre içinde yatay eksenin sonuna ve dikey eksenin merkezine hizalanacak şekilde değiştirin.