CSS Grid'de Yatay Eksen İçeriği Hizalama

Grid'de öğeleri yerleştirmekle kalmayıp, aynı zamanda grid'in yatay ekseni boyunca içeriği hizalamak da gerekebilir. Bu durumda, ebeveyn öğede tanımlanan justify-content özelliğini kullanırız. Bu özelliğin nasıl çalıştığını örneklerle inceleyelim.

Eksenin Başlangıcına Göre

Öğelerimiz için yatay eksenin başlangıcına göre 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;
	justify-content: start;
	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;
}

Eksenin Merkezine Göre

Şimdi öğelerimiz için yatay eksenin merkezine göre 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;
	justify-content: 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;
}

Eksenin Sonuna Göre

Öğelerimiz için yatay eksenin sonuna göre 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;
	justify-content: 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;
}

Pratik Görevler

İki sütuna yerleştirilmiş altı öğeden oluşan bir grid oluşturun. Öğeleri grid'in yatay ekseninin başlangıcına göre hizalayın.

Şimdi grid öğelerini üç sütuna yerleştirin ve öğeleri grid'in yatay ekseninin merkezine göre hizalayın.

Önceki görevi, öğelerin hizalamasının grid'in yatay ekseninin sonuna göre yapılacak şekilde değiştirin.