Radhitja e Përmbajtjes përgjatë Boshtit Horizontal në CSS Grid

Në grid mund të ketë nevojë jo vetëm për të pozicionuar, por edhe për të radhitur përmbajtjen përgjatë boshtit horizontal të grid. Në këtë rast ne përdorim vetinë justify-content, e cila është përcaktuar në elementin prind. Le të shohim me shembuj se si funksionon kjo veti.

Në fillim të boshtit

Le të vendosim radhitjen për elementet tona në fillim të boshtit horizontal:

<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;
}

Në qendër të boshtit

Tani le të vendosim radhitjen për elementet tona në qendër të boshtit horizontal:

<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;
}

Në fund të boshtit

Le të vendosim radhitjen për elementet tona në fund të boshtit horizontal:

<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;
}

Detyra praktike

Krijoni një grid, i përbërë nga gjashtë elemente, të vendosura në dy kolumna. Kryeni radhitjen e elementeve në fillim të boshtit horizontal të grid.

Tani vendosni elementet e grid në tre kolumna dhe caktoni radhitjen e elementeve në qendër të boshtit horizontal të grid.

Ndryshoni detyrën e mëparshme në mënyrë që radhitja e elementeve të kryhet në fund të boshtit horizontal.