CSS Grid Hücre İçi Yatay Eksen Hizalama

Grid hücreleri içindeki, yani sütun ve satırların kesişiminde oluşan alanlardaki öğeleri hizalamak için, ebeveyn öğede justify-items özelliği kullanılır. Hizalamayı en net şekilde tarayıcının hata ayıklayıcısında grid'i incelerken görebilirsiniz.

Eksenin Başına Göre

Şimdi öğelerimizi hücreler içinde yatay eksenin başı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;
	justify-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

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

Eksenin Ortasına Göre

Şimdi öğelerimizi hücreler içinde yatay 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;
	justify-items: center;
	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;
}

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

Eksenin Sonuna Göre

Şimdi öğelerimizi yatay 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;
	justify-items: end;
	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;
}

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

Pratik Görevler

Beş öğeden oluşan ve üç satıra yerleştirilmiş bir grid oluşturun. Öğeleri yatay eksende hizalayın.

Şimdi grid öğelerini iki satıra yerleştirin ve hücreler içindeki öğeleri yatay eksenin ortasına hizalayın.

Önceki görevi, öğelerin yatay eksenin sonuna hizalanacak şekilde değiştirin.